Telerik’s HTML5 Kendo UI Web Validator Framework

I recently wrote a blog on Telerik’s Kendo UI Web MVVM Framework. This blog post was intended to illustrate the power of MVVM binding on the client side (declaritive binding).

In this blog post I wanted to demonstrate the ability to do some nice validation with the Kendo UI Web Validator Framework which also let’ you do a quite bit of validtion declaritively. With that beind said let’s get right into it using the MVVM form we created from the previous post.

Let’s take a quick at where we left off at on our last form.


    <div id="formContainer">
        <h1>
            My First MVVM Web View!</h1>
        <form id="myForm" action="">
        <label>
            First Name</label>
        <input type="text" data-bind="value: firstName, disabled:  isDisabled" />
        <label>
            Last Name</label>
        <input type="text" data-bind="value: lastName, disabled:  isDisabled" />
        <label>
            Email</label>
        <input type="text" data-bind="value: email, disabled:  isDisabled" />
        <label>
            Twitter</label>
        <input type="text" data-bind="value: twitter, disabled:  isDisabled" />
        <label>
            Site</label>
        <input type="text" data-bind="value: site, disabled:  isDisabled" />
        <label>
            Address</label>
        <input type="text" data-bind="value: address, disabled:  isDisabled" />
        <label>
            City</label>
        <input type="text" data-bind="value: city, disabled:  isDisabled" />
        <label>
            State</label>
        <input type="text" data-bind="value: state, disabled:  isDisabled" />
        <label>
            Zip</label>
        <input type="text" data-bind="value: zip, disabled:  isDisabled" />
        <label>
            Occupation</label>
        <select data-bind="source: occupations, value: occupation, disabled:  isDisabled">
        </select>
        <br />
        <br />
        <input type="button" value="Load" data-bind="click: load" />
        <input type="button" value="Edit" data-bind="click: edit" />
        <input type="button" value="Cancel" data-bind="click: cancel" />
        <input type="button" value="Reset" data-bind="click: reset" />
        </form>
    </div>

Now let’s add a couple of extra fields and declaritively add some validation to our form. While doing this let’s go ahead and change the types to our input controls with the appropriate HTML5 (http://www.w3schools.com/html5/html5_form_attributes.asp) types e.g. date, number, email, etc.. Quick note, notice that we are using the HTML5 [pattern] attribute for the input field named “Phone”.


    <div id="formContainer">
        <h1>
            My First MVVM Web View <br />
            now with Validation!</h1>
        <form id="myForm" action="">
        <label>
            First Name</label>
        <input type="text" name="firstName" data-bind="value: firstName, disabled:  isDisabled" required validationMessage="please enter a first name" />
        <label>
            Last Name</label>
        <input type="text" name="lastName" data-bind="value: lastName, disabled:  isDisabled" required validationMessage="please enter a last name" />
        <label>
            Email</label>
        <input type="email" name="email" data-bind="value: email, disabled:  isDisabled" required />
        <label>
            Twitter</label>
        <input type="url" name="twitter" data-bind="value: twitter, disabled:  isDisabled" required data-required-msg="please enter a {0}" data-url-msg="please enter a valid url" />
        <label>
            Site</label>
        <input type="url" name="site" data-bind="value: site, disabled:  isDisabled" required validationMessage="please enter a {0}" data-url-msg="please enter a valid url"/>
        <label>
            Address</label>
        <input type="text" name="address" data-bind="value: address, disabled:  isDisabled" required validationMessage="please enter a {0}" />
        <label>
            City</label>
        <input type="text" name="city" data-bind="value: city, disabled:  isDisabled" required validationMessage="please enter a {0}"/>
        <label>
            State</label>
        <input type="text" name="state" data-bind="value: state, disabled:  isDisabled" required validationMessage="please enter a {0}"/>
        <label>
            Zip</label>
        <input type="text" name="zip" data-bind="value: zip, disabled:  isDisabled" required validationMessage="please enter a {0}"/>
        <label>
            Phone</label>
        <input type="tel" name="phone" pattern="\d{10}"  data-bind="value: phone, disabled:  isDisabled" required data-required-msg="please enter a {0} number" data-pattern-msg="please enter a 10 digit phone number"/>
        <label>
            Lucky Number</label>
        <input type="number" name="luckynumber" data-bind="value: luckyNumber, disabled:  isDisabled" required data-required-msg="please enter a lucky number" data-max-msg="please enter a number less than 100" min="1" max="100" />
        <label>
            Birth Date</label>
        <input type="date" name="birthdate" data-bind="value: birthDate, disabled:  isDisabled" required validationMessage="please enter a {0}" />
        <label>
            Occupation</label>
        <select name="occupation" data-bind="source: occupations, value: occupation, disabled:  isDisabled" required valdationMessage="please select a {0}">
        </select>
        <br />
        <br />
        <input type="button" value="Load" data-bind="click: load" />
        <input type="button" value="Edit" data-bind="click: edit" />
        <input type="button" value="Cancel" data-bind="click: cancel" />
        <input type="button" value="Reset" data-bind="click: reset" />
        <button type="submit" value="Submit">Save</button>
        </form>
    </div>

Notice that all we are doing here is really providing the Validator Framework with is validation messages for the type of validation. There is a convention that we need to follow which is marking the control with the attribute: data-[rule]-msg, [rule] just needs to be replaced with actual rule name so for example data-required-msg=”please enter a luckly number” will be the message that is displayed when there is no number in the input field and data-max-message=”please enter a number less than 100″ will be the validation message that is shown if a user enters a number that is greater than 100. Now that all of our validation messages are setup let’s add our one line of script to get this all of our validations wired up (line 45).


    var myViewModel;
    $(document).ready(function () {
        myViewModel = kendo.observable({
            firstName: "Long",
            lastName: "Le",
            email: "lelong37@gmail.com",
            twitter: "twitter.com/lelong37",
            site: "blog.longle.net",
            address: "3737 Galatic Avenue",
            city: "Cloud City",
            state: "Texas",
            occupations: ["", "Hacker", "Jedi", "Ninja"],
            occupation: "Jedi",
            phone: "1111111111",
            luckyNumber: 34,
            birthDate: null,
            isSaved: false,
            isDisabled: true,
            edit: function (e) {
                this.set("isDisabled", false);
            },
            cancel: function (e) {
                this.set("isDisabled", true);
            },
            reset: function (e) {
                this.set("firstName", null);
                this.set("lastName", null);
                this.set("email", null);
                this.set("twitter", null);
                this.set("site", null);
                this.set("address", null);
                this.set("city", null);
                this.set("state", null);
                this.set("zip", null);
                this.set("occupation", "");
                this.set("phone", null);
                this.set("luckyNumber", null);
            },
            load: function (e) {
                LoadJohnDoesInfo();
            }
        });

        kendo.bind($("#myForm"), myViewModel);
        var validator = $("#myForm").kendoValidator().data("kendoValidator");
    });

Now with our declaritive validation and one line of Javascript to wire everything up let’s give our form a spin. Let’s clear out our form by and try saving by clicking [Edit], [Reset] and [Save].

Let’s test out our messsages that are custom to a specific validation type by typing in an invalid Url for our Twitter, Site and invalid email address when filling out our form and clicking [Save].

Notice how are validation messages are not the displaying the standard required messages but now they are validation messages specific to the type of validation. For example with the field “Lucky Number” the standard validation message was “please enter a lucky number” now that we actually typed in a value that is greater than the max attribute that was set to 100 we are getting the declartive validation message “please enter a number less than 100”. Also for the field [email] we also have typed in something however because we changed the input type to email (new with HTML5) out of the box the framework is displaying a standard message for us “email is not a valid email” even though we did not explicitly declare a validation message for email.

Now let’s fix all the fields with the correct values email, twitter, site, phone and lucky number and notice as we tab out of each field our validation messages dissapear and we are able to post the form.

Last but not least we can manually invoke the Validator by invoking the validate() method, let’s go ahead and rewire our click button to go ahead and validate our form as well as display a message to the user.


        $("button").click(function (e) {
            e.preventDefault();
            if (validator.validate()) {
                alert("Your form is golden!");
            } else {
                alert("Your form has errors!");
            }
        });

Let’s give this a try.

Happy Coding! 🙂

Download: