Getting Started with Forms

The HTML5 form element supports the validation of inputs that is based on a set of pre-defined rules.

All inputs get validated upon form submission and if the validation fails, the form submission is prevented. Out of the box, KendoReact delivers components which support the HTML5 form validation and also provide props for configuring a set of minimal requirements for a component to be in a valid state.

You can use the KendoReact components which provide forms support in the following scenarios:

Whenever the validity state of a component is invalid, the form submission gets prevented. The prevention of form submission enables you to achieve the same behavior as the native HTML form elements (such as input and select) and to avoid the explicit verification of the validity state in the onSubmit event handler.

The following example demonstrates how to prevent the form submission by passing the required prop to a component.

You can use the KendoReact form components together with native HTMLform elements for achieving complex and styled forms. For more in
formation on appearance options refer to the article on styling of forms.
The following example demonstrates how to apply native HTML form elements to KendoReact components.

You can control the validity state of all form components through the valid property and provide complex form validation that is intended for a specific project. In combination with thevalidityStyles and validationMessage properties, valid enables you to apply input validation that is based on values which are external for the particular component.

The following example demonstrates how to achieve the complex form validation in KendoReact.