k-validator

by valchev

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">
    <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 />
            <br />
            <label for="FirstName" class="required">FirstName</label>
            <input id="FirstName" name="FirstName" class="k-textbox"/>
        </li>

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

CSS

.k-textbox {
    width: 11.8em;
}

#tickets {
    width: 510px;
    height: 323px;
    margin: 30px auto;
    padding: 10px 20px 20px 170px;
}

#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", 
             email: "That's a wrong email!", 
             custom: "You are not John!", 
             anotherCustom: "Only John Doe can book a ticket"}
        )
    },
    success: function(response) {
        var myMessages = response;
        
        validator = $("#tickets").kendoValidator({
            rules: {
                custom: function(input) {
                    if(input.is("[name=FirstName]")) {
                        return input.val() === "John" || input.val() === "John Doe";
                    } else {
                        return true;
                    }
                },
                anotherCustom: function(input) {
                    if(input.is("[name=FirstName]")) {
                        return input.val() === "John Doe";
                    } else {
                        return true;
                    }
                }                    
            },
            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");
            }
        });
    }
});