Kendo validation

by marhaba

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.bootstrap.min.css">
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<div id="example" class="k-content">
    <form id="tickets">
         <h3>Book Tickets</h3>

        <div>
            <ul>
                <li>
                    <label for="fullname" class="required">Your Name</label>
                    <input type="text" id="fullname" name="fullname" class="k-textbox" placeholder="Full name" required validationMessage="Please enter {0}" />
                </li>
                <li>
                    <label for="search" class="required">Movie</label>
                    <input type="search" id="search" name="search" required validationMessage="Please select movie" /><span class="k-invalid-msg" data-for="search"></span>

                </li>
                <li>
                    <label for="time" class="required">Start time</label>
                    <select name="time" id="time" required data-required-msg="Select start time">
                        <option>14:00</option>
                        <option>15:30</option>
                        <option>17:00</option>
                        <option>20:15</option>
                    </select> <span class="k-invalid-msg" data-for="time"></span>

                </li>
                <li>
                    <label for="amount" class="required">Amount</label>
                    <input id="amount" name="Amount" type="text" min="1" max="10" value="1" required data-max-msg="Enter value between 1 and 10" /> <span class="k-invalid-msg" data-for="Amount"></span>

                </li>
                <li>
                    <label for="email" class="required">Email</label>
                    <input type="email" id="email" name="Email" class="k-textbox" placeholder="e.g. [email protected]" required...

CSS

body {
    padding: 10px;
}
.help-block {
    font-size:0.9em !important;
}
.k-textbox {
    width: 11.8em;
}
#tickets {
    width: 810px;
    height: 323px;
    background: url('../../content/web/validator/ticketsOnline.png') transparent no-repeat 0 0;
}
#tickets h3 {
    font-weight: normal;
    font-size: 1.4em;
    border-bottom: 1px solid #ccc;
}
#tickets ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#tickets li {
    margin: 10px 0 0 0;
}
label {
    display: inline-block;
    width: 90px;
    text-align: right;
}
.required {
    font-weight: bold;
}
.accept, .status {
    padding-left: 90px;
}
.valid {
    color: green;
}
.invalid {
    color: red;
}
span.k-tooltip {
    margin-left: 6px;
}

JavaScript

var validator = $("#tickets").kendoValidator().data("kendoValidator");


$("#save").on("click", function () {
    if (validator.validate()) {
        // If the form is valid, the Validator will return true
        save();
    }
});

$(document).ready(function () {
    var data = [
        "12 Angry Men",
        "Il buono, il brutto, il cattivo.",
        "Inception",
        "One Flew Over the Cuckoo's Nest",
        "Pulp Fiction",
        "Schindler's List",
        "The Dark Knight",
        "The Godfather",
        "The Godfather: Part II",
        "The Shawshank Redemption"];

    $("#search").kendoAutoComplete({
        dataSource: data,
        separator: ", "
    });

    $("#time").kendoDropDownList({
        optionLabel: "--Start time--"
    });

    $("#amount").kendoNumericTextBox();

    var validator = $("#tickets").kendoValidator().data("kendoValidator"),
        status = $(".status");

    $("form").submit(function (event) {
        event.preventDefault();
        if (validator.validate()) {
            status.text("Hooray! Your tickets has been booked!")
                .removeClass("invalid")
                .addClass("valid");
        } else {
            status.text("Oops! There is invalid data in the form.")
                .removeClass("valid")
                .addClass("invalid");
        }
    });
});