Introduction

Validation works with several specific Ionic UI components such as:

• Checkbox
• Input
• RadioGroup
• Select
  and
• Textarea.

🚧

Important!

Enabling and disabling validation is possible if the components become Form Controls i.e. they are included in a Form component.

Input Validation Sample

Using validation is demonstrated for the Input components that were defined for the sample Ionic Login app but any other component indicated above gets this property by default if included in the Form.

For validation to work, we need to define it for the involved components. In our case, they are inputs and we will make some changes to the login flow defined for the sample app:

1. To start, open the DESIGN panel of the app loginPage and unfold the EVENTS tab from the bottom.
2. First, define the first Input component added to the Form like the following:

👍

Tip!

If you now unfold the Menu folder and select any of the files on the OUTLINE list, this particular component will get selected and its properties list will be shown on the PROPERTIES view on the right. It will also be selected on the breadcrumbs chain on top of the mobile frame so that you can see its nesting and easily switch between the other related page components:

3. Proceed to the second input and define its validation rules:

4. Make sure you define the Mark all as touch action for the Button component as well. This action will ensure that the needed credentials are provided before validation can take place.
5. Also, make sure the button is placed inside the form and its Type property is set to Submit under Link Features:

🚧

Note!

Different UI components can have different sets of validation properties.

6. That's it! You can now save your work and click the TEST button in the App Builder Toolbar to run the app in the preview and test how validation works for the login input procedure with the added Mark all as touch action: