Built around the HTML5 form validation attributes, it supports a variety of built-in validation rules and provides a convenient way for setting custom-rule handling. The Kendo UI Validator is a powerful framework component and essential for any application that collects user input. For a complete overview of its methods and configuration options, review the API calls of the Validator.

One of the highly anticipated features in HTML5 is the arrival of new HTML5 form validation attributes. When used, these attributes set constraints on HTML inputs, which are enforced by the browser. The available constraints include:

To use HTML5 form validation, these attributes are added to simple HTML input elements, as shown below.

Example

<input type="email" required>

When a browser supports HTML5 validation, it automatically attempts to validate if the input matches the defined constraints before it allows the form submission. If an input element fails to meet the constraints, the browser displays a message for the user. HTML5 also provides a number of new JavaScript APIs that can be used for manual input validation handling, such as checkValidity().

Important

An application should never rely on client-side validation as the only form of input validation. Client-side validation can help improve the user experience in an application, but it does not replace the need for server-side data validation on all user input.

The Validator works with the standard HTML5 form validation attributes. It allows you to use the normal HTML5 constraint attributes and then automatically makes these attributes work in all browsers (Internet Explorer 7 and later) while providing you with more possibilities for customization.

Example

You need to add a Validator to the page. Add the code from the following example in a JavaScript block on the page.

Example

// Initialize the Kendo UI Validator on your "form" container
// (NOTE: Does NOT have to be a HTML form tag)
var validator = $("#myform").kendoValidator().data("kendoValidator");
// Validate the input when the Save button is clicked
$("#save").on("click", function() {
if (validator.validate()) {
// If the form is valid, the Validator will return true
save();
}
});

With this simple configuration, the unchanged HTML5 form validation attributes now work in old and new browsers, and an application has complete control over the content and styling of validation error messages. When the Save button is clicked, if an input fails any of the constraints, the Kendo UI Validator displays the appropriate validation error message.

Example

Besides the built-in validation rules, you can set custom rules with the Kendo UI Validator through the rules configuration option.

Important Notes

Each custom rule is run for each element in a form. If there are multiple inputs in the form and the validation should only apply to a specific input, the custom validation code should check the input before validating.

Example

If the custom validation returns true, the validation will pass and vice versa.

If there are multiple custom rules, the rules run in order. The validation will stop at the first rule that fails and display the validation error message associated with that rule. A form is valid only if all custom validation rules pass in addition to the standard HTML5 constraints.

Any HTML5 constraints, applied to a form (required, type, etc.), are checked before custom rules are evaluated. Custom rules will not run until an input passes the basic HTML5 constraints.

Custom messages must match the name of the custom rule. If a custom message is not provided for a custom rule, a simple error icon is displayed.

Important

HTML5 also provides a way to set custom validation rules via setCustomValidity(), but as with other parts of HTML5, this rule only works in modern browsers. To create custom rules that work in all browsers, use the Kendo UI Validator custom rule definitions.

Ideally, the Kendo UI Validator places its tooltips besides the validated input. However, if the input is later enhanced to a ComboBox, AutoComplete, or other Kendo UI widget, placing the tooltip beside the input may cover important information or break the rendering of the widget. In this case, you can specify exactly where you want the tooltip to be placed by adding a span with the data-for attribute set to the validated input name and a .k-invalid-msg class.

The following example demonstrates a specific Tooltip placement. The Tooltip remains outside the AutoComplete widget after enhancement.

Was this article helpful?

/

Give article feedback

Tell us how we can improve this article

Code samples are inaccurate / outdated.
I expected to find other / more information.
There are typos / broken links / broken page elements.
Content is inaccurate / outdated.
Other
By checking this box you consent to Progress contacting you by email about your response on this page.

Frameworks

Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries. See Trademarks for appropriate markings.