Kendo UI Form Validation

by TJ VanToll

HTML

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<form>
    <div>
        <label for="name">Name:</label>
        <input type="text" name="name" id="name" required>
    </div>
    <div>
        <label for="email">Email:</label>
        <input type="email" name="email" id="email" required>
    </div>
    <div>
        <button>Submit</button>
    </div>
</form>

CSS

* { box-sizing: border-box; }
body {
    font-size: 1.2em;
}
body input, body button {
    font-size: 1.2em;
}

form > div {
    margin: 1em;
}
form button {
    width: 100%;
}
label { display: block; }
input {
    width: 100%;
    padding: 0.2em;
}
button {
    padding: 0.2em;
}

.k-invalid {
    background: red;
    color: white;
}
.k-tooltip-validation {
    color: red;
}

JavaScript

$( "form" ).kendoValidator({
    messages: {
        required: function( input ) {
            var element = input[ 0 ],
                label = $( element.form ).find( "[for=" + element.id + "]" );
            return label.text().replace( ":", "" ) + " is required.";
        },
        email: "Please provide a valid email address"
    }
});

$( "form" ).on( "submit", function() {
    alert( "Successful submission" );
});