Kendo UI form Validation

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8" />  
  5.     <title>Kendo UI Snippet</title>  
  6.   
  7.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css" />  
  8.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css" />  
  9.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.silver.min.css" />  
  10.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.mobile.all.min.css" />  
  11.   
  12.     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  
  13.     <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>  
  14. </head>  
  15. <body>  
  16.   
  17.     <form id="myform">  
  18.         <div class="form-inline k-alt">  
  19.             <span class="editPageLabel">FirstName:<span style="color:red">*</span></span>  
  20.             <input name="FirstName" required  validationmessage="Please Enter First Name"/> <br />  
  21.             </div>  
  22.         <div class="form-inline k-alt">  
  23.             <span class="editPageLabel">LastName:<span style="color:red">*</span></span>  
  24.             <input name="LastName" required validationmessage="Please Enter Last Name"/> <br />  
  25.             </div>  
  26.         <div class="form-inline k-alt">  
  27.             <span class="editPageLabel">Email:<span style="color:red">*</span></span>  
  28.             <input type="email" required validationmessage="Please Enter Proper Email ID" /><br />  
  29.             <button id="Btn-Validation" onclick="Validation()">Validate</button>  
  30.             </div>  
  31.   
  32. </form>  
  33.   
  34.     <script>  
  35.         $(document).ready(function(){  
  36.       
  37.         var validator = $("#myform").kendoValidator().data("kendoValidator");  
  38.         $("#myform").on("submit", function () {  
  39.             alert("Successful submission");  
  40.         });  
  41.         })  
  42.     </script>  
  43. </body>  
  44. </html>