jQuery Form Validations

jQuery has a declarative way of doing the validations which are very neat and intuitive. The sample code for a form validation having an input box is (Make sure you have required jQuery javascripts included in your file.

<script type="text/javascript">
  $(function() {
      $("#myForm").validate({
                    errorContainer: errors,
                    errorLabelContainer: $("ul", errors),
                    wrapper: 'li'
       });
   });
</script>
   
<form  id="myForm" method="Post" action="<action_url">
  
   <div id="errors"><ul></ul></div>
     <div>
        <input id="inputText" type="text"/>
            <script type="text/javascript">
        $(function() {
            $("#inputText").rules("add", {
                 required: true,
                 maxlength: 25,
                 messages: {
                   required: "inputText is required",
                   maxlength: "inputText can have maximum 25 characters"
                 }
            });
        });
        </script>
        <input type="submit" value="Submit"/>
     </div>
</form>

I prefer the way of adding the rules dynamically to the form elements. In this way, if the elements are rendered because of some condition than the rules will also not get applied. The possible validations out of the box can be found at http://docs.jquery.com/Plugins/Validation. Check the list of build-in validations.

Writing own validation is also easy. For that first write a function and attach it to the validator

<script type="text/javascript">
 $(function() {
      $.validator.addMethod(
          "postiveIntegerNumber",
          function(value, element, regexp) {
              var re = new RegExp(regexp);
              return this.optional(element) || re.test(value);
      });
  });
</script>

Add it to the form element

<input id="inputText" type="text"/>
            <script type="text/javascript">
        $(function() {
            $("#inputText").rules("add", {
                 required: true,
                 maxlength: 25,
                 postiveIntegerNumber : "^\\d$",
                 messages: {
                   required: "inputText is required",
                   maxlength: "inputText can have maximum 25 characters",
                   postiveIntegerNumber: "Please enter a positive integer."
                 }
            });
        });
   </script> 

"^\\d$" is the regular expression for positive integer.

If the validations needs to be skipped, let's say a cancel button, than we can remove the validations by attaching a function on the click which removes the validation

<input id="cancel" type="submit" value="Cancel"/>
  <script type="text/javascript">
    $(function() {
        $("#cancel").click(function() {
          //Remove all the validation on the form
          var form = $("#myForm").get(0);
          $.removeData(form, "validator");
          $("#cancel").click();
         });
      });
    </script>