July 17, 2014

jQuery Validation and jQuery Unobtrusive Validation are validation frameworks for validating data in web pages. The main difference between the two is that jQuery Validation requires javascript codes to be entered in the page whereas jQuery Unobtrusive Validation requires the validation related data to be available in the data- attributes for the html elements. So, with the first option, the html elements will contain javascripts in it whereas with the later, the code will be lot cleaner.

Here is an example of how the code will look like.

jQuery Validation
  1. <input type="text" name="firstName" id="firstName" class="required" />
  2. <script>
  3.     $(function () {
  4.         $("form").validate();
  5.     });
  6. </script>


jQuery Unobtrusive Validation
  1. <input type="text" name="firstName" id="firstName" data-val="true"
  2.     data-val-required="First Name is required." />
  4. <div class="validation-summary-valid" data-valmsg-summary="true">
  5.     <ul>
  6.         <li style="display: none"></li>
  7.     </ul>
  8. </div>


Reference: Shahed Kazi at AspNetify.com