k-validator

HTML

<script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<div id="tickets">
<div id='ttt'>


    <h3>Book Tickets</h3>
    <ul>
        <li>
            <label for="email" class="required">Email</label>
            <input type="email" id="email" name="Email" class="k-textbox" placeholder="e.g. [email protected]"  required data-email-msg="Email format is not valid" />
        </li>

        <li  class="accept">
            <button class="k-button" type="submit">Submit</button>
        </li>
        <li class="status">
        </li>
    </ul>
    </div>
</div>

CSS

.k-textbox {
    width: 11.8em;
}

#tickets {
    width: 510px;
    height: 323px;
    margin: 30px auto;
    padding: 10px 20px 20px 170px;
    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;

$.ajax({
    //using jsfiddle echo service to simulate JSON endpoint
    url: "/echo/json/",
    dataType: "json",
    type: "POST",
    data: {
        // /echo/json/ echoes the JSON which you pass as an argument
        json: JSON.stringify(
            {required: "My custom required message"}
        )
    },
    success: function(response) {
        var myMessages = response;
        
        validator = $("#ttt").kendoValidator({
            messages: myMessages
        }).data("kendoValidator");
        
        var status = $(".status");
            
        $("button").click(function() {
            if (validator.validate()) {
                status.text("Hooray! Your tickets has been booked!").addClass("valid");
                } else {
                status.text("Oops! There is invalid data in the form.").addClass("invalid");
            }
        });
    }
});