New to Kendo UI for jQuery? Download free 30-day trial

Display Validation Summary in Mobile Application

The example below demonstrates how to display a validation summary if the validation fails when working with the Hybrid UI Application of Kendo UI.

     <div id="home" data-role="view" data-title="Registration Form" data-init="onInit">
        <header data-role="header">
            <div data-role="navbar">
                <span data-role="view-title"></span>

        <div class="validation-summary">
            <!-- customizing the tooltip position -->
            <!-- for more information please see -->
            <span class="k-invalid-msg" data-for="username"></span>
            <span class="k-invalid-msg" data-for="email"></span>
            <span class="k-invalid-msg" data-for="birthdate"></span>
            <span class="k-invalid-msg" data-for="password"></span>
            <span class="k-invalid-msg" data-for="agreement"></span>

        <ul id="list" data-role="listview" data-style="inset">
                <label for="username">Username:</label>
                <input type="text" id="username" name="username" required="required" />
                <label for="mail">Email:</label>
                <input type="email" id="email" name="email" required="required" />
                <label for="birthdate">Birthdate:</label>
                <input type="date" id="birthdate" name="birthdate" />
                <label for="password">Password:</label>
                <input type="password" id="password" name="password" required="required" />
                <label for="remember">I aggree to Terms of Use:
                    <input type="checkbox"  id="agreement" name="agreement" required="required" validationMessage="You must agree with the Terms of Usage!" />

        <a data-click="validate" id="register" type="button" data-role="button">Register</a>
        <a data-click="clear" id="clear" type="button" data-role="button">Clear</a>

<style scoped>
    .validation-summary {
        margin: 1em;
        min-height: 1.8em;

    .validation-summary .k-invalid-msg {
        display: block;
        margin: 0.3em 0;

    #clear {
        display: block;
        text-align: center;
        margin: .6em .8em 0;
        padding: .5em 0;
        font-size: 1.2em;

    #clear { background-color: #2e2e2e; }
        var app = new,

        function onInit(e) {
            //init the validatior
            validator = e.view.element.kendoValidator().data("kendoValidator");

        function validate() {
            if(validator.validate()) {
            } else {
                //scroll back to top

        function clear() {
            //clear values of the inputs
            $("#list").find("input[type=checkbox]").attr('checked', false);
            //hide validation messages
            $(".validation-summary .k-invalid-msg").hide();
            //scroll back to top

See Also

Articles on the Application and other Hybrid UI components in Kendo UI:

For more runnable examples on the Hybrid UI Application of Kendo UI, browse its How To documentation folder.

In this article