jQuery Live Form Validation Version 1.1

I made some incremental changes to the previous version of jQuery Form Validation and added some new features to the same.

New features in version 1.1
  1. Validations of radio-buttons and check-boxes now possible
  2. Added jquery.validation.functions.js to modularize addition of new validation functions.
  3. New validation functions added
    1. isValidDate(year, month, day): It takes in three parameters the year(i.e. full year) of the date, the month of the date and the day part of the date and returns false if its not a valid date and true if valid. It includes checking of leap years. For example: 02-29-2008 will show as valid but 02-29-2009 as invalid.
    2. isChecked(id): It takes the id of the container containing the group of check-boxes or radio-buttons and returns false if none of the children were checked and true if at-least one was checked.
Download and Demo

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

This entry was posted in Javascript, Programming and tagged , , , , , . Bookmark the permalink.

32 Responses to jQuery Live Form Validation Version 1.1

  1. azril says:

    Hi, may I know how to validate confirm password field? I need to validate that the confirm password field should be the same as input in the password field.
    Thanks

  2. Pingback: jQuery Live Form Validation Version 1.1 | GeekTantra | My Web Development Bookmarks

  3. Pingback: Twitted by LaFermeDuWeb

  4. Petite Belle says:

    mm… attractive ))

  5. pramod says:

    Hey how to do validation for url please its urgent

  6. Aki says:

    Is it possible to do custom validation, something like; if text field is empty and drop down not selected then display message?

  7. Dave says:

    Can’t get isValidDate to work for months 08 and 09.

  8. Nikola says:

    I can’t get checkbox validation to work.
    I always get “not checked” error message no matter if checked or not.

    Is there a solution. I double checked, and it seems to me that everything conforms to your example.

  9. Nikola says:

    I declare that I have read and I agree with the Terms & Conditions

    and I’ve put your default script from demo changed to find #tcaccept in my header

    jQuery(“#tcaccept”).validate({
    expression: “if (isChecked(SelfID)) return true; else return false;”,
    message: “Please check this to agree to Terms & Conditions.”
    });

    I always get the error message. No matter if it’s checked or not

    • Nikola says:

      ok. just lost my html code above. sorry.
      I have just a straight input type=checkbox name=tcaccept id=tcaccept value=on
      I removed quotes and other special chars

      Thanks in advance
      Nikola

      • GeekTantra says:

        Hi Nikola,

        If you observe the advanced demo carefully. The validation example for checkboxes given there is for a set of checkboxes out enclosed in the id=”ValidCheckbox”. You have two options to implement your case, either use it with the enclosing id or write the following expression:
        jQuery(“#tcaccept”).validate({
        expression: “if (jQuery(‘#tcaccept’).is(‘:checked’)) return true; else return false;”,
        message: “Please check this to agree to Terms & Conditions.”
        });

        I guess the above solution will fit your needs perfectly.

        Regards,
        GeekTantra

  10. peeke says:

    hi, very nice solution on the radiobuttons. I have a problem. I make several forms on a page via mysql. They are in a hidden div. When clicked on a link one of them wil show. In every form are radiobuttons with different id’s. How can I pass those id’s to the script so I have to use only one script for all the forms.

  11. srinivasan says:

    excellent tutorial

  12. Dave says:

    The reg expression for validating no spaces is not working: /^[\S]*$/

  13. Anonnymoose says:

    Excellent script, but I was having some strange behaviour when combining this with jQuery UI’s Datepicker option.

    The problem was that if a validation error had been triggered and you then proceeded to set a date the error message was not cleared unless you again clicked in and out of the field (or just ignored the error and carried on, but this is not helpful to the end user!). To overcome this I added ‘change’ to the bind parameters in jquery.validate.js line 46.

    Before: jQuery(this).bind(‘focus keypress’, function(){
    After: jQuery(this).bind(‘focus keypress change’, function(){

    I have not tested all of the features of the validate script to see if this causes any problems elsewhere but thought I would post in case it helps anyone else as it solves the problem for me.

    GeekTantra, hope you don’t mind my tinkering with your code.

  14. Dejan says:

    Is there any solution to expand validation form by place the code that adding two random numbers

  15. Dejan says:

    var a = Math.ceil(Math.random() * 10);
    var b = Math.ceil(Math.random() * 10);
    var c = a + b
    function Draw()
    {
    document.write( a + ” + ” + b +” “);
    document.write(“”);
    }
    .
    .
    .
    jQuery(“#adding”).validate({
    expression: “var d = document.getElementById(‘adding’).value; if (d == c) return true; else return false;”,
    message: “Enter valid number…”
    });

    .
    .
    .
    in html enter these DrawBotBoot()

  16. mitra says:

    Its good but i found one issue with live validation of check-box and radio on Google Chrome.
    its only working on submit button click but as live validation of checkbox and radio its not working. with other browsers its working as expected.
    Any solution ?

  17. gourav says:

    how to show error message below the input fields, please tell me urgent .
    thankyou

    • Dhaval says:

      In jquery.validate.css need to make little change like

      span.ValidationErrors {
      display: table-row-group;
      font-size: 12px;
      font-weight: 700;
      color: #D00 !important;
      padding-left: 10px;
      font-style: normal;
      text-shadow: 0 1px 0 #fff
      }

      U see in display attribute i change value, after that u get achive ur result.

  18. Dhaval says:

    Hi, really its good for me, but I need little much ur help.

    I want to make hide means remove all validation on click of clear button or reset button.

    How’s it possible?

  19. Luke Oliff says:

    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!”
    });
    });

  20. Nashvin says:

    i have used the validation many times. Got a new prob, for example in an input for name i have default value “Type a name or reference”, thus i dont have error msg as the input is considered as filled. Is there any parameter just not to validate the default value you put in the HTML of the input?

    Thanks in advance for any help. :)

  21. od3n says:

    hi,

    how can i show message with dynamic value? i tried to pass variable to the message , but it just use the value i first set, not updated

  22. paul says:

    Hi,

    Thanks for the plugin it is working very well.

    I want to keep my submit button disabled until all required fields are validated.

    Is there some check I can do to ensure all required fields have been filled correctly before enabling the submit button?

    /Paul.

Leave a Reply

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