Validation
The Kendo UI for Vue Form provides comprehensive validation capabilities through different approaches:
- Validation with errors and onChange
- Async Validation with Debouncing
- Field Validation
- FieldArray Validation
- Form Validation
Validation with errors and onChange
The errors and onChange props provide a flexible validation approach for various scenarios:
- Client-side validation
- Server-side validation
- Async validation with debouncing
- Cross-field validation
- Progressive validation states (loading, error, success)
The errors prop accepts an object mapping field names to error messages and takes precedence over all other validation mechanisms. The onChange prop provides a centralized handler that fires whenever any field value changes, receiving the field name, new value, and a function to access other field values.
To use validation with errors and onChange, follow these steps:
- Define a reactive object to store validation errors.
- Set the
errorsprop of the Form to pass the validation errors. - Handle the
onChangeevent to clear errors as users modify fields. - Perform validation in your submit handler and update the errors object with results from server or client validation.
The following example demonstrates both client-side and server-side validation using the errors and onChange props. To trigger server-side validation, enter admin in the username field and test@blocked.com in the email field.
Async Validation with Debouncing
The errors and onChange props enable asynchronous validation patterns without modifying the existing validator system. This is particularly useful for:
- Real-time availability checks (usernames, email addresses)
- API-based validation that requires network calls
- Debounced validation to reduce server load
- Progressive validation states (loading, error, success)
To implement async validation with debouncing, follow these steps:
- Create a reactive object to store validation errors and a variable to track the debounce timer.
- Handle the
onChangeevent and check if the changed field requires async validation. - Clear any existing debounce timer to reset the delay on subsequent changes.
- Set a new timer using
setTimeoutto delay the validation call. - Perform the async validation (API call) when the timer expires.
- Update the
errorsprop with the validation results.
The following example demonstrates async validation with debouncing for username availability checks.
Field validation
Field level validation is useful for simple validation of single field value (for example.: field is valid email). The validation function receives value as first argument and expects validation message to be returned if value is not valid.
For async validation or server-side validation scenarios, see Validation with errors and onChange.
FieldArray validation
Field array level validation is useful for simple validation of arrays, such as ensuring the array contains a minimum number of records. The validation function receives value as first argument and expects validation message to be returned if value is not valid.
For async validation or server-side validation scenarios, see Validation with errors and onChange.
Form validation
Form validation can be used for complex validation between more fields, where using the field level validation is not convenient.
The
validatorprop only supports synchronous validation. For async validation or server-side validation, see Validation with errors and onChange.