jQuery Live Form Validation

After trying a load of non intuitive and not very useful jQuery form validation plugins I came up with this plugin. Its a jQuery plugin which helps create easy form validations with high flexibility and a large set of options.

Demo: Click Here
Advanced Demo: Click Here
Download: Click Here
Project Repository: Click Here

Features:
  • Supports custom validations
  • Options to toggle between live and onsubmit validations
  • Completely customizable CSS
Usage:
  • In the head section add the following code:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <script src="javascripts/jquery.validate.js" type="text/javascript"></script>
    <script type="text/javascript">
                jQuery(function(){
                    jQuery("#<id of field to be validated>").validate({
                        expression: "if (<expression for validation>) return true; else return false;",
                        message: "<message on validation failure>"
                    });
                });
    </script>
  • Add the form in the body as shown below

    <form action="" method="post">
    <input type="text" name="<name of field to be validated>" id="<id of field to be validated>" />
    <input type="submit" value="Submit" />
    </form>

That’s it you are done!

For advanced users:

Options:
  • expression: The javascript code which should have two outputs
    or . The value of the field is given by . As this is a string escape characters for backslash and other non standard characters must be used. (Default: return true;)
  • message: The validation message for the field. (Default: “”)
  • error_class: The CSS class of the error message container. (Default: “ValidationErrors”)
  • error_field_class: The CSS class added to the field when found invalid. (Default: “ErrorField”)
  • live: Sets whether the validation of the field should be live or on form submit. (Default: true)
This entry was posted in Javascript, Programming and tagged , , , . Bookmark the permalink.

201 Responses to jQuery Live Form Validation

  1. With today’s newer geochemical software, it is feasible to get an
    even better knowing of the earth by finding the layers
    apart in 3d modelling software package. At Animation Live students can also appear
    for international certifications of Corel Products.
    As a commercial technology, image segmentation is still in its infancy.

  2. Hi! I’ve been reading your web site for a long time now and finally got the
    courage to go ahead and give you a shout out from Lubbock Tx!
    Just wanted to tell you keep up the fantastic job!

  3. ejh says:

    This is a great plug in. Even though it is 5 years old, I recently found it and it is so much easier to use with existing code than anything out there.

    The only thing that I am trying to do is TRIM WHITE SPACES. Any thoughts on applying it? White spaces definitely change the length. I am using the php trim function before I make the call to the database.

    I am not the best with JS. I tried VAL.trim.length, which did not work.

    Here is a snippet of the code:

    jQuery(“#ValidNumber24″).validate({
    expression: “if (VAL < 24 && !isNaN(VAL)) return true; else return false;",
    message: "Please enter a number less than 24"
    });
    jQuery("#ValidNumber2Digits").validate({
    expression: "if (!isNaN(VAL) && VAL.length <= 2) return true; else return false;",
    message: "Please enter a number 2 digits or less"
    });
    jQuery("#ValidNumber2Digits50").validate({
    expression: "if (VAL.length <= 2 && !isNaN(VAL) && VAL < 50) return true; else return false;",
    message: "Please enter a 2 digit number less than 50"
    });

    ….

    Enter a Number less than 24 [optional]

    Enter a Number with 2 digits or less [optional]

    Please enter a 2 digit number less than 50 [optional]

  4. Greetings from Los angeles! I’m bored at work so I decided tto check out your
    site on my iphoone during lunch break. I love the knowledge you present here
    and can’t wai to take a look when I get home.
    I’m surprised at hoow quick your blog loaded on my mobile
    .. I’m not evn using WIFI, just 3G .. Anyhow, good site!

Leave a Reply

Your email address will not be published. Required fields are marked *