Validator Overview

The Kendo UI Validator widget offers an easy way to do client-side form validation.

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 Validator is a powerful framework component and essential for any application that collects user input.

Basic Usage

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.

To use the Validator, define an HTML form that includes one or more of these new attributes.

<div id="myform">
    <input type="text" name="firstName" required />
    <input type="text" name="lastName" required />
    <button id="save" type="button">Save</button>
</div>

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

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

Functionality and Features

See Also

In this article
Not finding the help you need? Improve this article