Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/validator/index">
    <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.default.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.default.min.css" />
​
    <script src="http://cdn.kendostatic.com/2014.3.1411/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.3.1411/js/kendo.all.min.js"></script>
</head>
<body>
​
        <div id="example">
        <div class="demo-section k-header">
        <div id="tickets">
            <form class="k-content" id="ticketsForm">
                <h3>Book Tickets</h3>
                <ul>
                    <li>
                        <label>Label RIGHT</label>
                        <input id="Name" class="k-textbox" required validationmessage="required field" />  
                    </li>
                  
                    <li>
                        <label>Label BELOW</label>
                        @Html.Kendo().TextBoxFor(m => m.Name, new { @class="k-textbox", requiredvalidationmessage="required field"  })
                    </li>
                  
                    
                </ul>
            </form>
        </div>
        </div>
​
            <style scoped>
                #tickets ul {
                    list-style-type: none;
                    margin: 0;
                    padding: 0;
                }
                #tickets li {
                    margin: 5px 0;
                }
            </style>
​
            <script>
                $(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 = $("#ticketsForm").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");
                        }
                    });
                });
            </script>
        </div>
​
​
</body>
</html>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers