Understand how to validate data before you submit forms
Validations are predefined conditions that ensure that you enter valid data even before the Form is submitted. Typically, you may have validation checks, say, for example, email addresses in a valid format, phone number necessarily in a ten-digit format, restricting the maximum product quantity, a valid date within the specified range, and so on. You can have basic validations and advance validations for the different controls.
Let us have a quick look at this video to understand the process to add validations to your forms.
Applying Basic validations
The basic validations are simple ones that can be achieved through properties under the Info Tab for the controls. For example, for marking a field as a mandatory field, you simply need to set its property as ‘Required’ - Yes.
Some of the other basic validations that can be applied are properties like Read-Only, Input Type, Character limit, and so on.
If you see the example below, we have the option to define the Input type as Email, which makes it necessary for the user to enter a valid email address. Further, we can set the Character limit for the Text control as Min 5 and Max 50. This is again a basic validation to restrict users from entering more than 50 characters.
Applying Advance validations
Advance validations are those validations that would be applied as restrictions based on certain operations like values equal to or not equal to, values within a certain number range, a value containing certain characters, matching a regular expression, date range, and so on.
To add the validations to your forms, select the Rules option from the sidebar menu of your app.
Here you can see the Rules and Validation tabs. Select the Validations tab.
To add a new validation to any of the controls, select the Control and then click Add One. You can now add the validation operations here.
You can set multiple validations that would need all to be True in a given context (using the And condition ) or may need either of the conditions to be True ( using the Or condition ). The operators will vary for Numeric, Text, Date, and other controls. You will need to add an appropriate error message to display to the user if the validation returns ‘ True’ when the value entered is an invalid input.
Let us take the example of the Product Details form that we have created earlier for the Inventory Management System. We have a Product name, description, quantity, image, and Submit button on the form. Let us add the validation checks to restrict the users from entering NA (not applicable) for a product name and the Quantity in the range of 5 to 50 units.
Once you have set the validations to the necessary controls you need to Save the validation and exit to check the settings. Now we will take a preview of the form and enter ‘ NA’ for the Product name and Quantity as 55 units. Error messages will be displayed below each invalid input. The Form data will not be submitted when you click Submit unless you enter valid data .
Let us take a few more examples to understand the different validations that can be applied to different controls. Add a toggle control, a date time picker control, a dropdown, and a dropdown with the property set to multi-select. Let us now understand what validations operations we can apply to these controls.
Select the Rules > Validations tab.
If you check the list of controls under the Validations tab you can see that the data type for some of the controls differs from the type of control. It is important to remember that the operators for these controls will change as per the data type of the control. For example:
- Text and Text Area control, Radio button control , Select bar control , are Text data type, Dropdown (single select) are all Text type
- Numeric control is a Number data type
- Toggle control is Boolean
- Date time picker control is Date_time data type
- Dropdown (multi-select) control is a List type
Note: It is important to understand that you will be able to see only those controls that are input controls. For e.g. the Submit button or any Action button would not be listed here under the Validations tab .
Let us now understand the operations available for a few of the common controls:
Text type controls
The operators available for all those controls with Text data type including those for the dropdown (single select), radio buttons will be similar to that for text and text area controls. You can assign a validation to check the defined values or the data from a field.
The Operators will be Equal to, Not Equal to, Start with, Not Start with, End with, Not end with, Contains, Not Contains, Regular expression, Is empty, Is not empty.
- Contains: This operator is used to check if the input value contains the specified characters or strings. For example, if a Product name should contain “Mfg”, then we will define it as Contains > Value > Mfg.
Regular expression : This operator is used to specify a sequence of characters to define a pattern. For example: To set a constraint that the Productname must contain only letters, numbers, and underscores, the pattern will be defined as Regular Expression > Value > ^[A-Za-z0-9_]*$ .
Number type controls
The operators for the number type controls will be related to numeric operations like value greater than, equal to, less than, and so on. You can assign a validation to check the defined values or the data from a field.
The Operators will be Equal to, Not Equal to, Less than, Greater than, Less than or equal to, Greater than or equal to, Regular expression, Is empty, Is not empty.
The date-time picker controls will have validations for comparing the dates and times like date_time equal to, before a given date, and so on.
The Operators will be Equal to, Not Equal to, Before, Before or equal, After, After or equal, Regular expression, Is empty, Is not empty.
- Before, Before or equal, After, After or equal are operations to validate dates before or after the specified date. For example, to validate that the delivery date or date of expiry is not less than today’s date.
List Type controls
Typically checkbox, dropdown lists (multi-select), will have an array of data. They will thus have validations for comparing the selected values with a certain set of characters defined or values from fields.
The Operators will be Minimum select, Maximum select, Exact select, Contains, Not contains, Regular expression, Is empty, Is not empty, Contains any, Not contains any, Contains all, Not contains all.
- Minimum select and Maximum select : This operation defines the minimum and maximum number of list items to be selected. For example, if Minimum select = 2, it means that you would have to select at least two of the options from the list.
- Exact select: This operation defines the exact number of items to be selected from the list. For example, if you set Exact select = 2, then if you select one 1 item or even 3 or more items it will throw an error message.
- Contains and Not Contains: This operation specifies that the selected items should contain or not contain the specified string or field. For example, the Category of items should contain at least Essentials along with other multiple options of user’s choice. Contains > Value > [“Essentials”]
Contains any: This operation specifies that the selected items should contain any of the specified items. For example, we may want to specify that the selected items should contain either or any of the values out of Packaged and Essentials along with other multiple options selected.
Contains any > Value > [“Packaged”, “Essentials”]
Contains all: This operation specifies that the selected items should contain all of the items mentioned in the validation. For example, we may want to specify that the selected items should contain both Packaged as well as Essentials along with other multiple options selected.
Contains all > Value > [“Packaged”, “Essentials”]
The Toggle controls would return the values as boolean. Thus the validation will be based on comparing whether the value returned is 0 (false) or 1 (true).
- The operators for the toggle control are Equal to and Not Equal to . Let us take an example where the user selects whether the current product will have factory gate delivery. If the user selects ‘ True ’ on the toggle control, delivery will be done, else if the toggle returns False it will show a message that the “ Item will not have factory gate delivery” .
You can thus add validations to the different input controls. Remember that you cannot add validation and rules to the Non-input controls like the container controls, button controls, navigation controls, media controls, chart controls, and so on.
Let us now take a preview of the form to check the output for the above validations:
There are several validations that may be required when you are building your forms and applications. Once you are satisfied with the validations, you can publish the app and feel assured that you can now capture validated data for further processing.