- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title>Kendo UI Snippet</title>
- <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css" />
- <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css" />
- <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.silver.min.css" />
- <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.mobile.all.min.css" />
- <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
- <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>
- </head>
- <body>
- <form id="myform">
- <div class="form-inline k-alt">
- <span class="editPageLabel">FirstName:<span style="color:red">*</span></span>
- <input name="FirstName" required validationmessage="Please Enter First Name"/> <br />
- </div>
- <div class="form-inline k-alt">
- <span class="editPageLabel">LastName:<span style="color:red">*</span></span>
- <input name="LastName" required validationmessage="Please Enter Last Name"/> <br />
- </div>
- <div class="form-inline k-alt">
- <span class="editPageLabel">Email:<span style="color:red">*</span></span>
- <input type="email" required validationmessage="Please Enter Proper Email ID" /><br />
- <button id="Btn-Validation" onclick="Validation()">Validate</button>
- </div>
- </form>
- <script>
- $(document).ready(function(){
- var validator = $("#myform").kendoValidator().data("kendoValidator");
- $("#myform").on("submit", function () {
- alert("Successful submission");
- });
- })
- </script>
- </body>
- </html>
From this code snippet you will learn how to do form validation in kendo UI.
