Your search did not match any results.

Validation

This demo shows how to implement a default validation group - a group of editors on a page with enabled data validation. In this particular demo, the editors are grouped in an HTML form.

Backend API

To enable data validation for an editor, you need to declare the Validator component and implement validation rules. You can attach multiple validation rules to one component. The following list contains all available validation rule types:

  • required
    A validation rule that requires the validated field to have a value.

  • email
    A validation rule that requires the validated field to match the Email pattern.

  • async
    A custom validation rule used for server-side validation. Implement the validationCallback function to validate the target value.

  • compare
    A validation rule that requires the validated editor's value to equal the value of the specified expression. To apply this rule, implement the comparisonTarget function to specify the value against which this component compares the validated value.

  • pattern
    A validation rule that requires the validated field to match a specified pattern.

  • stringLength
    A validation rule that requires the target value length to fall within the range of the specified minimum and maximum values. This property only accepts string values.

  • range
    A validation rule that requires the target value length to fall within the range of the specified minimum and maximum values. This property only accepts date-time and numeric values.

  • numeric
    A validation rule that requires the validated field to have a numeric value.

  • custom
    A rule with custom validation logic. Implement the validationCallback function to validate the target value.

All validation rule types allow you to specify an error message for a component. You can also specify the message position for each editor. If your application implements a validation group, you can use a validation summary to display all validation errors in one place. In this demo, click the Register button to see a validation summary.

The Register button's useSubmitBehavior property is enabled. As a result, a click on the button validates and submits the HTML form. In your application, you can also implement the button's onClick event handler and use the validate() or validateGroup() method to validate a group of editors.