Update for jQuery Live Form Validation Plugin
So we have yet another update for jQuery Live Form Validation Plugin. Its a small but important update.
An important feature which I missed out in versions 1.0 and 1.1 has been added in this version. It is a callback option which can help make AJAX callbacks or any other callbacks when the form is successfully validated.
Now we can make callbacks on successful validation.
In this example I am making an AJAX post to post.php when the form is successfully validated. For this we just need to add the following to the head section of our HTML file
<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(){ //The Validation as earlier jQuery("#<id of field to be validated>").validate({ expression: "if (<expression for validation>) return true; else return false;", message: "<message on validation failure>" }); //The callback for the form with ID FormID jQuery("#FormID").validated(function(){ jQuery.post("post.php", jQuery("#FormID").serialize(), function(data){ jQuery("#FormID").html(data); }); }); }); </script> |
I have updated the advanced demo with an alert callback.
Advanced Demo: Click Here
Download: Click Here
Project Repository: Click Here
Hope this feature helps. And many thanks to Vayu for pointing out this important feature.
Dear
The form validation is very good!
But I found a problem in the form validation, when I config the field using “jQuery(“#firstTrade”).validate({})” that means this filed must be validation before it submit the form. If this field is optional, that means if this field not input anything, it should not be validated, only validate when it has inputted value, how can I do this using form validation?
best wishes!
Issac
Hi Issac,
Thank you for your appreciation. I guess what you are trying to do is validate a required field. Its actually very easy instead of simply mentioning jQuery((“#firstTrade”).validate({}) just put in the following code to check if the field is empty or not.
jQuery(“#firstTrade”).validate({
expression: “if(VAL) return true; else false;”,
message: “First trade is a required field.”
});
Actually I kept this sort of a syntax to make it very flexible for validations.
GeekTantra.
Hi, GeekTantra,
Thanks for reply! Actually what I’m trying to do is not validate a required field!
The filed should not be validated when its value is empty. Only validate when it has been inputted value.
if I use the syntax:
jQuery(”#firstTrade”).validate({
expression: “if(VAL) return true; else false;”,
message: “First trade is a required field.”
});
It will always validated the filed “firstTrade”, so this result is not what I want!
I’m very appreciate for your advice!
Best wishes!
Issac
Sorry Issac, may be there is some mis-understanding. So what kind of a validation should be there when its value is input.
for this you can use the following syntax:
jQuery(”#firstTrade”).validate({
expression: “if(VAL==”something” || VAL == “”) return true; else false;”,
message: “First trade is a required field.”
});
Hi, GeekTantra,
I’m sorry for not describing clearly!
Can you add my MSN passport: oceansidc@hotmail.com if you are free?
I have a email filed like this:
jQuery(“#email”).validate({
expression: “if (val.match(/^[^\\W][a-zA-Z0-9\\_\\-\\.]+([a-zA-Z0-9\\_\\-\\.]+)*\\@[a-zA-Z0-9_]+(\\.[a-zA-Z0-9_]+)*\\.[a-zA-Z]{2,4}$/)) return true; else return false;”,
message: “Must input valid email No.”
});
If the user not input this filed, I want the form validation not to validate this field. So, based on current syntax, the form validation always will validate it. I try your syntax, it doesn’t work, may be you can give me a sample, thanks very much!
best wishes!
Issac
In the jquery.validate.js file added the following to get it work what u want try out it works
jQuery(this).parents(“form”).submit(function(){
var x = ‘#’ + SelfID
y= $(x).val();// getting the value of the element
if( y != “”) //checking for input and validating only if it is not empty
{
validate_field(‘#’ + SelfID);
if (ValidationState == “valid”)
return true;
else
return false;
}
});
Hi Issac,
For this specific case you should use:
jQuery(“#ValidEmail”).validate({
expression: “if (VAL.match(/^[^\\W][a-zA-Z0-9\\_\\-\\.]+([a-zA-Z0-9\\_\\-\\.]+)*\\@[a-zA-Z0-9_]+(\\.[a-zA-Z0-9_]+)*\\.[a-zA-Z]{2,4}$/)) return true; else return false;”,
message: “Please enter a valid Email ID”
});
And use the latest version of jQuery Live form validation.
GeekTantra
Hi, GeekTantra,
Does this work well in your machine?
There is not any changes between the two syntax except the ID
BTW, I’m use the latest version of jQuery Live form validation.
best wishes
Issac
Please tell me what template do you use? Is it a template? Did you hire someone to fix this?
Its a template which I modified heavily.
Hi,
I like how gracefully this form degrades.
I just have one question for you.
Did you think about putting destructors in?
Say I wanted a form
to validate one way and then change
dynamically to validate another way.
Regards
Alex
Hi Alex,
Can you be a bit more specific about how you want it to work. Can you give an example situation and I will see if this can be modded to fit the situation?
GeekTantra
Hey GeekTantra,
I really like this validation script, but I was wondering if there was a way to change it so it would validate against clicks on other types of links besides just the submit button.
I am using Wizard form script (http://www.jankoatwarpspeed.com/post/2009/09/28/webform-wizard-jquery.aspx) and need it to validate the current set of inputs before being allowed to go to the next step.
is this possible without heavy modification?
Hi ThatGuy,
The modification you are saying is pretty much simple. If you open jquery.validate.js you will see a function named “validate_field(id)” there. Copy the whole function with its definition to the script on the head of your html. Now add onclick events on to the links with the action. The onclick event should call “validate_field(‘id_of_the_field_to_be_validated’)”.
Regards,
GeekTantra.
Doing that I get:
options is not defined
Error… I am calling validation up above and I am putting this in an .each() function to go through each :input in the current fieldset. I will keep toying with it. Thanks for the pointer so far!
Hey how to do validation for URL please its urgent
Hi pramod,
Here is a validation for URL:
jQuery(“#ValidURL”).validate({
expression: “if (VAL.match(/^(http\:\/\/[a-zA-Z0-9_\-]+(?:\.[a-zA-Z0-9_\-]+)*\.[a-zA-Z]{2,4}(?:\/[a-zA-Z0-9_]+)*(?:\/[a-zA-Z0-9_]+\.[a-zA-Z]{2,4}(?:\?[a-zA-Z0-9_]+\=[a-zA-Z0-9_]+)?)?(?:\&[a-zA-Z0-9_]+\=[a-zA-Z0-9_]+)*)$/)) return true; else return false;”,
message: “Please enter a valid URL”
});
Thank u very much Geektantra but this is not working in my code
when i had a look on the code it is just not performing in usual way in function validate_field(id) where i tried to alert validation state but nothing is poping out
but it works fine up to that step i.e it alerted id, expression but not validation state
Hi
First – great great great validation tool !
here is my problem, hope you can help.
I’m trying to validate dynamic dropbox – lets say
state and city which are created via a php script(from a Database)
The php is the one creating the select and option tags.
Jquery does not seem to see those tag after they have been created and does not
validate them
The values are 0 and still no validation.
jQuery(“#FromState”).validate({
expression: “if (VAL == ’0′) return false; else return true;”,
message: “Please make a selection”
});
jQuery(“#FromCity”).validate({
expression: “if (VAL != ’0′) return true; else return false;”,
message: “Please make a selection”
});
Any ideas ?
10x
Hi adjunct,
I have setup a demo for you on how to achieve the above case. Please follow this link.
http://www.geektantra.com/demos/dynamic-dropdowns/
Regards,
Geektantra
Hi,
is it possible to include umlauts (äüö) and other special characters like ß to the validation?
Regards
Colin O. Below
Hi Colin,
It depends on the character set you are using. Use UTF-8 to include such characters as ß etc. To change the charset, put this <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ /> in the head part of your HTML.
Regards,
GeekTantra
Hi,geektantra! you made a excellent plugin and I’m using it! here I found some problems:
1.when we are validate a email, if the invalid email is too long(I tested if over 27 charecters), the js’s efficiency will down sharply , and this caused many browser’s stop on it except safari
2. when the param live set to false, when I input three invalid field and start to correct one by one, I can’t know whether I corrected it,because they will stay wrong status untill they are all correct.
looking forward your reply!
Hi Mask,
Thank you for pointing out the problems. I will look into the performance issues of the plugin and try to replicate the second bug you have mentioned. I will get back to you as soon as possible.
Regards,
GeekTantra
Hello,
jQuery(“#postcode”).validate({
expression: “if (VAL) return true; else return false;”,
message: “Please enter Postcode”
});
postcode should start (CR or GU or KT or RG or RH) are valid
i want to do validation starting two character which show above , if its match then its fine , if doesnt match then its should give the error ….
could you tell me how could i do this validation.
starting 2 character should have validation ..
eg: CR0 2AD is valid
eg: NW1 2SE is not valid
Hi, The email validation as you kindly provided does not allow for an hyphen (“-”) within the domain name!
Here is an update to the code to allow for hyphens in the domain name part of an email address:
jQuery(“#email”).validate({
expression: “if (VAL.match(/^[^\\W][a-zA-Z0-9\\_\\-\\.]+([a-zA-Z0-9\\_\\-\\.]+)*\\@[a-zA-Z0-9_\\-]+(\\.[a-zA-Z0-9_]+)*\\.[a-zA-Z]{2,4}$/)) return true; else return false;”,
THANKS for your free code
Hi dave,
Thanks for the update. Will change it in my code.
Regards,
GeekTantra
Hi, GeekTantra.
Hi GeekTantra,
Great plugin, but I had a question regarding the callback functions. If the validation expression returns true, is it possible to execute a function? For example, I want to validate that the input entered is a valid number. If it is, I’d like to format it as currency, other wise return false. Is something like that possible?
Thanks,
Jordan
Is there any way to change this wokr with live() so that it may carry through when dynamically adding form elements etc? I was able to get it sorta working but glitchy in i.e and no submission. Tried it with the latest 1.4 jquery release. Any suggestions?
Ryan
GeekTantra,
I’ve tried using class instead of id and can’t get my validation to work. Just want to confirm that id’s must be used. Thanks…
$(“.quantity”).validate({
expression: “if (VAL != ’0′) return true; else return false;”,
message: “Enter one or greater”
});
also tried
$(“#formID.quantity”).validate({
expression: “if (VAL != ’0′) return true; else return false;”,
message: “Enter one or greater”
});
I am constantly invstigating online for tips that can assist me. Thx!
Hello,
I’m trying your validation tool and I have this message only in IE :
Out of memory at line:12
The form is well posted after I click “ok”, but I have this javascript alert message and it’s of course very annoying.
Do you know where it could come from ?
Great validation script. One of the best out there.
Upon submitting the form my confirmation page (e.g. completed.htm) loads into the same space where the form was. What setting do I change to where the completed submittal doesn’t load into the same page?
Sorry. Got it fixed. Just took off the AJAX callback.