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.

190 Responses to jQuery Live Form Validation

  1. Pingback: New jQuerry Tools to Increase Productivity and Safety | DesDevWeb

  2. Dixit Sharma says:

    Who will tell us that what should be the expression for validation ??
    You are not helping the beginners.
    It could help experienced but not a little bit to beginners.

  3. Mothilall says:

    It’s very helpful to me.

    But How can i match Password and re-enter password with this jquery validation?

    • var email1 = $(“input#email1″).val();
      if (email1 == “”) {
      $(“img#email1_error”).show();
      $(“input#email1″).focus();
      return false;
      }
      var email2 = $(“input#email2″).val();
      if (email2 != email1) {
      $(“img#email2_error”).show();
      $(“input#email2″).focus();
      return false;
      }

    • Manoj says:

      Go to the advance demo page .You can get their the code.

  4. Taiwo says:

    What kinds of data can this plugin validate and how do I get the error or success message to display inside the input field?

    Thanks.

  5. Good Tutorial. and its useful too.
    Thanks for the post.

  6. Rem says:

    How would you go about adding a function to focus on the first invalid field after hitting submit? It would be good if it would jump right to the field that that they need to correct.

  7. Anton says:

    some problems with date validation
    for example date 08-09-2012 – isnt valid

  8. Pemo Chen says:

    Esta validación esta cool, pero me gustaría o como puedo hacer que me validara campos con el mismo nombre e id, Gracias
    This validation is cool, but I would like or I can do I validate fields with the same name and id, Thanks

  9. Desirae says:

    It would be helpful if there were docs or some type of library where we can look up the expressions to know what expression to input. I understand it is in the example, but it isn’t clear as to where to find that information.

  10. Desirae says:

    I’m about to give up. I think this is really cool but I can’t seem to make it work can someone please help? My URL is http://www.awayfaringchef.com/contact.html.

  11. Bincy Joseph says:

    Would you please provide me the codings for advanced demo?Please send me as early as possible.

  12. kranthi says:

    can u send me the regular expression to validate website url,i have tried with many regular expressions but it was giving error.

  13. Pingback: 50个表单功能验证安全和自定义化的jQuery插件 | EvilCode 邪恶代码

  14. Pingback: 115 Useful jQuery Form Resources | Pulse2 Technology and Social Media News

  15. Pingback: 30款实用的jQuery表单插件 - TC网页开发技术分享站

  16. Roshan says:

    Thanks for providing this article. I am able to get the validation done if the fields are noncompliant to the coding done.
    But I am facing one issue and that is even if the values entered are non-compliant, I am able to submit the form successfully which ideally it shouldnt.

    kindly assist me in fixing this issue

  17. Nikhil says:

    This inline form Validation is A-W-E-S-O-M-E. Thanks For this article. Can i give multiple expressions and messages using if-else loop? i.e. for a field i’ve check the max length, valid number and it need not be empty and for each a different message

    Any help is appreciated

  18. guna says:

    hi sir, i am used jquery tab and implement this type of validation jquery also. but not working

    javascript error : Object doesn’t support this property or method.

    jQuery(function() {
    jQuery(“#txtcmpname”).validate({
    expression: “if (VAL) return true; else return false;”,
    message: “Please enter the Required field”
    });
    });

    How to solve please help me…

  19. Tom says:

    This is awesome. I don’t think you got the love you deserve. Your advanced form validation with all the various examples are great.

  20. Pingback: jQuery For Web Design » 13 jQuery Form Validator Plugins

  21. Kate says:

    Meh. No workie. I’m sure there’s something simple to fix it, but I don’t have time to finish the documentation on someone else’s work.

  22. mdv says:

    This is the validation I was searching in WEB. Thank U very much. Another help , how to validate a mobile no.

  23. Arman says:

    Hi,
    I’m facing two problems:
    1. Inside the jquery function I can set a JS variable using PHP.

    Now I’m trying to check if this value (uid) is the same as is provided in another text field (uid2) as:
    jQuery(“#uid2″).validate({
    expression: “if (VAL != ‘uid’) return true; else return false;”,
    message: “*Wrong User”
    });

    But, it doesn’t work.

    2. Next, I want to check if some data is input in a text field (group_name) if a check-box (cc_group) is checked. If the check-box is checked, there must be some data to return true, false if there is no data in the text-field but the check-box is checked. It should return true if the check-box is not checked and there is no data in the text-field. I tried below code:

    var isChecked = jQuery(‘#cc_group’).is(‘:checked’);
    jQuery(“#group_name”).validate({
    expression: “if((isChecked) && (VAL.match(/^[A-Za-z_,]+$/))) return true; else return false;”,
    message: “*Group”
    });

    Please help

  24. Peter Maloy says:

    I have a site where I allow people to start checking out, then go back and add something to their cart, then come back and complete checkout. I capture the data that they have entered so they don’t have to re-enter everything when they come back.

    This means that they may have invalid data already present when they come back to the form, so I wanted to validate on load, ignoring any empty fields. It took me quite a while to find a way, so I thought I’d share the method I found:

    $(‘input’, ‘#form’).each(function()
    {
    if($(this).val())
    {
    $(this).trigger(‘focusin’);
    $(this).trigger(‘focusout’);
    }
    });

  25. Hamayun Khan says:

    First of all Great tutorial. I want to validate group of text fields. At least one out of the group need to be required? Can any one help out. Thanks everyone

  26. Julia says:

    Thanks for finally writing about >jQuery Live Form Validation | GeekTantra <Loved it!

  27. Luke Oliff says:

    Password validation via this system. Please validate in your hardcode as well, as someone can just disable this validation in their code inspector…

    function hasUpperCase(password) {
    return /[A-Z]/.test(password);
    }
    function hasLowerCase(password) {
    return /[a-z]/.test(password);
    }
    function hasNumbers(password) {
    return /\d/.test(password);
    }
    function hasNonalphas(password) {
    return /\W/.test(password);
    }
    $(document).ready(function(){
    $(“#user_password”).validate({
    expression: “if (VAL && VAL.length > 8 && hasUpperCase(VAL) && hasLowerCase(VAL) && hasNumbers(VAL) && hasNonalphas(VAL)) return true; else return false;”,
    message: “You must enter a valid password to continue.”
    });
    $(“#user_confirm_password”).validate({
    expression: “if ((VAL == $(‘#user_password’).val()) && VAL) return true; else return false;”,
    message: “Your passwords must match!”
    });
    });

  28. Parminder says:

    Hi Geektantra,
    Everything is good other than the whitespaces which most of the programmers forgot to apply. Anyway, It’s fantastic efforts to share learning. Keep it up my friend and do apply the whitespace validations because if you simply press spacebar it accepts.
    Parminder

  29. Great goods from you, man. I have understand your stuff previous to
    and you are just too fantastic. I really like what you’ve acquired here, really like what you’re stating and the
    way in which you say it. You make it entertaining and you still care for to keep
    it smart. I cant wait to read much more from you.
    This is actually a great website.

  30. Pingback: The Comprehensive Guide to Customizing EmailDirect Sign Up Forms – Part 2 - Hello Inbox : An Email Marketing Blog by Email Marketing Service Provider, EmailDirect.

  31. thebdawk05 says:

    Awesome validation tool that doesn’t force you to use a form tag. One thing that would be nice though is if it worked with an .each function.. That’d be amazing!

  32. Tren Chepe says:

    Great!!

    I liked it very much!!! Now I just have to learn how to do the CSS modifications. Great plugin, much better than all the others.

    Greetings,
    Eddie

  33. boypeace says:

    why to create two expression in one field, example I need must input interger and length ??

  34. Darshan says:

    What will be the expression to allow only alphabets in a text field?

  35. Pingback: Best jQuery Plugins for Form Functionality and Validation | Code Geekz

  36. Pingback: 32 Useful jQuery Form Plugins | Web and Graphic Design Blog

  37. Tom says:

    Hi
    Is there any way to make VAL usable outside of the validate function ?

    I’d like to be able to compare VAl to another variable and then if they don’t match run the validation..

    Thanks

  38. Pingback: 25 jQUERY PLUGINS FOR ENHANCEMENT OF HTML FORMS

  39. Piyush Kanpariya says:

    Hello sir,
    I am use yout jquery-form-validate.1.2 in my asp.net web site. one i have one problem found ,this validatation cannot work in master pages’ chlid page only work it in singal page.

  40. Manoj says:

    How can i use submitHandler for preventing multiple form submission in this plugin.

  41. Pingback: 16 jQuery Validation Plugins For Your Web Forms | Templates Perfect

Leave a Reply

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