Defining element validation logic

You can define validation logic for all input control elements.

If validation logic has been defined for an element, it is triggered when the user moves focus from the form element.

If the input control element contents are invalid, the field is highlighted in red and a warning message is displayed below it.

To define element validation logic

  1. Click the element on the UI Builder canvas.

  2. Click the VALIDATION tab in the configuration pane.

    ../../_images/ss-uibuilder-validation-empty.png
  3. Select the Condition block modifier.
    The options are:
    • And

    • Or

  4. Click New validation.

  5. Select a validation criterion from the Name dropdown list.
    The options are:
    • Not empty

    • Email

    • Password

    • Number

    • Phone Number

    • Positive Number

    • Whole Number

    • Url

  6. [Optional] Click New validation to add another validation criterion to the logic block, and repeat step 5.

  7. [Optional] Click New block to add another logic block, and repeat from step 3.

Note

To delete a validation, click Delete validation.
To delete a block, click Delete block, at the bottom of the block field set.

Example

In this example, there are two validation blocks.
To be valid, the element must not be empty, and the contents must either be a valid email format or a valid telephone number format.
../../_images/ss-uibuilder-validation-example.png