Categories
Javascript Programming

jQuery Live Form Validation Version 1.1

jquery-form-validate-advanced-demoA new release of the jQuery Live form validation plugin is here with new features.
Advanced Demo: Click Here
Download: Click Here

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

32 replies on “jQuery Live Form Validation Version 1.1”

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

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

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.

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

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

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

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.

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.

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()

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 ?

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.

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?

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

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. 🙂

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 *

This site uses Akismet to reduce spam. Learn how your comment data is processed.