New to Kendo UI for Vue? Start a free 30-day trial

Forms Support

The ComboBox supports a native Kendo UI for Vue implementation of HTML5 form validation.

The forms supports enables you to validate input values and prevent the submission of forms which are in an invalid state.

Functionality and Features

Setting Validation Requirements

The ComboBox supports props for setting basic validation requirements. The required property enables the user to pre-define a selection that is required for a successful form submission.

Example
View Source
Change Theme:

Setting Custom Validation Messages

You can implement custom error messages which will be displayed when the ComboBox is in an invalid state and the user tries to submit the form. To render a custom validation message, set the validationMessage prop.

Example
View Source
Change Theme:

Enforcing the Validity State

The ComboBox enables you to set its validity state by utilizing its exposed props. Setting the validity state allows for the implementation of complex validation scenarios that are based on multiple sources. To override the current validity state and apply the corresponding styles, use the valid prop.

Example
View Source
Change Theme:

Disabling the Validation Styling

By default, to achieve a visual representation of its invalid state, the ComboBox applies the k-invalid class name to the wrapping component. To disable the utilization of k-invalid, set the validityStyles property to false.

Example
View Source
Change Theme: