# Validation

The Kendo UI for Vue Form provides comprehensive validation capabilities through different approaches:

* [Validation with errors and onChange](https://www.telerik.com/kendo-vue-ui/components/form/validation#validation-with-errors-and-onchange)
* [Async Validation with Debouncing](https://www.telerik.com/kendo-vue-ui/components/form/validation#async-validation-with-debouncing)
* [Field Validation](https://www.telerik.com/kendo-vue-ui/components/form/validation#field-validation)
* [FieldArray Validation](https://www.telerik.com/kendo-vue-ui/components/form/validation#fieldarray-validation)
* [Form Validation](https://www.telerik.com/kendo-vue-ui/components/form/validation#form-validation)

## Validation with errors and onChange

The [`errors`](https://www.telerik.com/kendo-vue-ui/components/form/api/formprops#errors) and [`onChange`](https://www.telerik.com/kendo-vue-ui/components/form/api/formprops#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:

1. Define a reactive object to store validation errors.
2. Set the [`errors`](https://www.telerik.com/kendo-vue-ui/components/form/api/formprops#errors) prop of the Form to pass the validation errors.
3. Handle the [`onChange`](https://www.telerik.com/kendo-vue-ui/components/form/api/formprops#onchange) event to clear errors as users modify fields.
4. 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.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/form/client-server-validation/source.txt)

## 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:

1. Create a reactive object to store validation errors and a variable to track the debounce timer.
2. Handle the [`onChange`](https://www.telerik.com/kendo-vue-ui/components/form/api/formprops#onchange) event and check if the changed field requires async validation.
3. Clear any existing debounce timer to reset the delay on subsequent changes.
4. Set a new timer using `setTimeout` to delay the validation call.
5. Perform the async validation (API call) when the timer expires.
6. Update the [`errors`](https://www.telerik.com/kendo-vue-ui/components/form/api/formprops#errors) prop with the validation results.

The following example demonstrates async validation with debouncing for username availability checks.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/form/async-validators-with-debounce/source.txt)

## 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.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/form/fieldvalidation/source.txt)

> For async validation or server-side validation scenarios, see [Validation with errors and onChange](https://www.telerik.com/kendo-vue-ui/components/form/validation#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.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/form/fieldarrayvalidation/source.txt)

> For async validation or server-side validation scenarios, see [Validation with errors and onChange](https://www.telerik.com/kendo-vue-ui/components/form/validation#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.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/form/formvalidation/source.txt)

> The `validator` prop only supports synchronous validation. For async validation or server-side validation, see [Validation with errors and onChange](https://www.telerik.com/kendo-vue-ui/components/form/validation#validation-with-errors-and-onchange).

## Suggested Links

* [API Reference of the Form](https://www.telerik.com/kendo-vue-ui/components/form/api/formprops)
* [FormProps API - errors property](https://www.telerik.com/kendo-vue-ui/components/form/api/formprops#errors)
* [FormProps API - onChange property](https://www.telerik.com/kendo-vue-ui/components/form/api/formprops#onchange)