Post
Ask Question

JQuery Validation for ASP.NET Application

JQuery Script Code:
  1. < script src = "//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.js"  
  2. type = "text/javascript" > < /script>    
  3. <script src="/ / ajax.aspnetcdn.com / ajax / jQuery.validate / 1.11.1 / jquery.validate.js " type="  
  4. text / javascript "></script>    
  5. <script src=" //netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>    
  6. <  
  7. script type = "text/javascript" > $("form").validate({  
  8.     showErrors: function(errorMap, errorList) {  
  9.         // Clean up any tooltips for valid elements    
  10.         $.each(this.validElements(), function(index, element) {  
  11.             var $element = $(element);  
  12.             $element.data("title", "") // Clear the title - there is no error associated anymore    
  13.             .removeClass("error")  
  14.                 .tooltip("destroy");  
  15.         });  
  16.         // Create new tooltips for invalid elements    
  17.         $.each(errorList, function(index, error) {  
  18.             var $element = $(error.element);  
  19.             $element.tooltip("destroy") // Destroy any pre-existing tooltip so we can repopulate with new tooltip content    
  20.             .data("title", error.message)  
  21.                 .addClass("error")  
  22.                 .tooltip(); // Create a new tooltip based on the error messsage we just set in the title    
  23.         });  
  24.     },  
  25.     submitHandler: function(form) {  
  26.         alert("This is a valid form!");  
  27.     }  
  28. }); < /script>  
Aspx.page source code:
  1. <html  
  2.     xmlns="http://www.w3.org/1999/xhtml">  
  3.     <head runat="server">  
  4.         <title>Validation</title>  
  5.         <meta charset="utf-8" />  
  6.         <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">  
  7.             <style>    
  8. form { padding: 10px; }    
  9. .error { border: 1px solid #b94a48!important; background-color: #fee!important; }    
  10. .row {    
  11. margin-left:30px;    
  12. }    
  13. </style>  
  14.         </head>  
  15.         <body>  
  16.             <form id="form1" runat="server">  
  17.                 <div class="row">  
  18.                     <label for="RequiredDateDemo">A date is required (eg "15 June 2012"):</label>  
  19.                     <input    
  20. data-msg-date="The field RequiredDateDemo must be a date."    
  21. data-msg-required="The RequiredDateDemo field is required."    
  22. data-rule-date="true"    
  23. data-rule-required="true"    
  24. id="RequiredDateDemo" name="RequiredDateDemo" type="text" value="" />  
  25.                 </div>  
  26.                 <div class="row">  
  27.                     <label for="StringLengthAndRequiredDemo">A string is required between 5 and 10 characters long:</label>  
  28.                     <input    
  29. data-msg-maxlength="The field StringLengthAndRequiredDemo must be a string with a minimum length of 5 and a maximum length of 10."    
  30. data-msg-minlength="The field StringLengthAndRequiredDemo must be a string with a minimum length of 5 and a maximum length of 10."    
  31. data-msg-required="The StringLengthAndRequiredDemo field is required."    
  32. data-rule-maxlength="10"    
  33. data-rule-minlength="5"    
  34. data-rule-required="true"    
  35. id="StringLengthAndRequiredDemo" name="StringLengthAndRequiredDemo" type="text" value="" />  
  36.                 </div>  
  37.                 <div class="row">  
  38.                     <label for="RangeAndNumberDemo">Must be a number between -20 and 40:</label>  
  39.                     <input    
  40. data-msg-number="The field RangeAndNumberDemo must be a number."    
  41. data-msg-range="The field RangeAndNumberDemo must be between -20 and 40."    
  42. data-rule-number="true"    
  43. data-rule-range="[-20,40]"    
  44. id="RangeAndNumberDemo" name="RangeAndNumberDemo" type="text" value="-21" />  
  45.                 </div>  
  46.                 <div class="row">  
  47.                     <label for="RangeAndNumberDemo">An option must be selected:</label>  
  48.                     <select    
  49. data-msg-required="The DropDownRequiredDemo field is required."    
  50. data-rule-required="true"    
  51. id="DropDownRequiredDemo" name="DropDownRequiredDemo">  
  52.                         <option value="">Please select</option>  
  53.                         <option value="An Option">An Option</option>  
  54.                     </select>  
  55.                 </div>  
  56.                 <div class="row">  
  57.                     <button type="submit">Validate</button>  
  58.                 </div>  
  59.             </form>< script src = "//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.js"  
  60. type = "text/javascript" >< /script>  
  61.             <script src="/ / ajax.aspnetcdn.com / ajax / jQuery.validate / 1.11.1 / jquery.validate.js " type="  
  62. text / javascript "></script>  
  63.             <script src=" //netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script><  
  64. script type = "text/javascript" > $("form").validate({  
  65.     showErrors: function(errorMap, errorList) {  
  66.         // Clean up any tooltips for valid elements    
  67.         $.each(this.validElements(), function(index, element) {  
  68.             var $element = $(element);  
  69.             $element.data("title", "") // Clear the title - there is no error associated anymore    
  70.             .removeClass("error")  
  71.                 .tooltip("destroy");  
  72.         });  
  73.         // Create new tooltips for invalid elements    
  74.         $.each(errorList, function(index, error) {  
  75.             var $element = $(error.element);  
  76.             $element.tooltip("destroy") // Destroy any pre-existing tooltip so we can repopulate with new tooltip content    
  77.             .data("title", error.message)  
  78.                 .addClass("error")  
  79.                 .tooltip(); // Create a new tooltip based on the error messsage we just set in the title    
  80.         });  
  81.     },  
  82.     submitHandler: function(form) {  
  83.         alert("This is a valid form!");  
  84.     }  
  85. }); < /script>  
  86.         </body>  
  87.     </html>