ValidationPremium
The KendoReact 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 state to store validation errors using the
useStatehook. - 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 state 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 state to store validation errors and a ref 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 synchronous validation of single field values (e.g., checking if a field is a valid email). The validation function receives value as the first argument and returns a validation message if the value is not valid.
You can setup field validation using the validator property of the Field component.
For async validation or server-side validation scenarios, see Validation with errors and onChange.
FieldArray Validation
Field array level validation is useful for synchronous validation of arrays (e.g., ensuring an array has at least one record). The validation function receives value as the first argument and returns a validation message if the value is not valid.
You can setup field array validation using the validator property of the FieldArray component.
For async validation or server-side validation scenarios, see Validation with errors and onChange.
Form Validation
Form validation can be used for synchronous, cross-field validation between multiple fields, where using field level validation is not convenient.
You can setup form validation using the validator property of the Form component.
The
validatorprop only supports synchronous validation. For async validation or server-side validation, see Validation with errors and onChange.