Form Validations

You can specify validations to various UI controls in the pages of your UI model and allow the submission of form only when the specified validations are satisfied. You can add validations to individual UI controls and then specify that the Button control to submit the form should enable only if the required validations are satisfied.

You can add validations to the following UI controls in your pages:

  • Text-Date
  • Text-Date Range
  • Text Area
  • Text-Password
  • Text-Email (Clearable)
  • Selector-Selectbox
  • Selector-MultiSelect
  • Text-Number (Clearable)

To add validations, select the UI control, click Form/Validations from the Settings tab and specify the following details:

  • Form ID: Enter an ID for the form in which you want to validate the current UI control.
  • Hint for Control: Enter a message that should display in the form if the UI control validation is not satisfied.
  • Validations: Click Add and select one or more of the following validations as Name:
    • Min: Applicable only for Text-Number(Clearable) control. Enter the minimum Value allowed as input. Enter the Validation Message that you want to display if the required input value is not entered or entered in invalid format.
    • Max: Applicable only for Text-Number(Clearable) control. Enter the maximum Value allowed as input. Enter the Validation Message that you want to display if the required input value is not entered or entered in invalid format.

      • For example, if you enter 1 as min and 9999 as max, the input in the UI control can only be a number between 1 and 9999.

    • MinLeangth: Enter the minimum length of the Value allowed as input. For example, if you specify 5 the input value cannot be less than 5 characters. Enter the Validation Message that you want to display if the required input value is not entered or entered in invalid format.
    • MaxLeangth: Enter the maximum length of the Value allowed as input. For example, if you specify 20 the input value cannot exceed 20 characters. Enter the Validation Message that you want to display if the required input value is not entered or entered in invalid format.
    • Pattern: Allows to specify RegEx validation. For example, if you want to allow only alpha-numeric values as input you must specify the following RegEx for Javascript:

      /^[a-z0-9]+$/

      By default the RegEx for Javascript is case sensitive. You can use appropriate RegEx to make it case insensitive. For example, if you want to allow alpha-numeric values without case-sensitive, you must specify the following RegEx for Javascript:

      /^[a-z0-9]+$/i

      Enter the Validation Message that you want to display if the required input value is not entered or entered in invalid format.

    • Required: Specifies that the input value is mandatory. Enter the Validation Message that you want to display if the required input value is not entered or entered in invalid format.
    • Email: Specifies that the input value must be an Emaild ID in valid format. Enter the Validation Message that you want to display if the required input value is not entered or entered in invalid format.

After adding validations to individual UI controls as above, you can specify whether the button can be enabled or not until the validations are satisfied. You can bind Button-Single, Button-Horizontal, or Button-Vertical control to these validations.

Add a Button control in the same page where the UI controls are added and enter the following details from Setting tab:

  • Form ID: Enter the Form ID that you specified in the UI control validation settings.
  • Disable button until form is valid: Select to disable the button until all the applicable validations are satisfied. The values in the UI controls with matching Form ID will be validated. Only after all the validations are satisfied, the button will be enabled.
  • Need validation tooltip: Select to display the required validations to satisfy before the button is enabled. The validations are displayed in the order the UI controls are arranged in the page.