Live Javascript Validation
A person might think it easy to find a complete (radio & checkbox) client-side validation script on the web. It would however be my opinion that such a person would be mistaken. I searched and searched for a script I could plug and play, so to speak. The reality was, it simply did not exist. So, I decided to take an older script written by Travis Beckham at squidfingers.com and update it with some live validation or what some might call inline error messages.
I re-worked a majority of the original code by Travis except for the Regular Expressions used to validate the extrapolated data from the form elements. I’m not going to provide here a tutorial on how to use the new script, but if you like I have a functioning example for dissecting.
Just so you know, I didn’t come up with any sort of ground breaking technique for validating radio & checkbox elements. I really didn’t have the timeline for that (and the javascript reflects this) kind of development. With my version of Travis’s script you still have to hard code validation for all radio & checkbox elements on a case by case bases. What I do believe I accomplished is a slick solution for validating forms (live) without the use of alert boxes. With cues from the man in blue my validation script will provide live feedback to the user as they are interacting with the form elements. Check it out and let me know what you think.
If the mouse pointer changes to a hand when you roll-over an image associated with a story the image upon clicking either links to enlarged version of the image or a website associated with the image.
Looks good! Thanks for sharing.
Have you seen the article by Chris Campbell on particletree about different methods of js form validation? Quite a good write up and he promised to write a follow up on the method with hidden form fields to make the system more flexible and reusable.
That is pretty neat Cody. Thanks for sharing.
Sweet action, Jackson…err..Cody. Anyway, very nice. Wish I would have had this about 6 months ago. =)
Hi Cody,
I’ve been playing around with form validation myself. My method is to contain all the validation rules within HTML comments e.g.
< !-- htelephone ^[\d\s\-\(\)\+]+$ false false //-- >
will make sure that the value of input field with the id “htelephone� matches the regular expression ^[\d\s\-\(\)\+]+$.
The first “false� tells the validator that the validation routine should be ran onChange (a value of “true� checks the elements value onBlur). The final “false� tells the validator that the field is optional, a value of “true� makes the field compulsory.
The biggest problem with this method is that IE5.x does not add HTML comments to the DOM meaning the script quietly fails in these browsers.
Another downfall is that I have not thought of a solution to the ‘checkbox’ and ‘radio button’ validation (using regular expressions anyway) so the current script doesn’t (yet) deal with these form elements.
An old and musty version of the script can be viewed on the fd site
http://www.frequency-decoder.com/demo/form-validator/
– things have been tidied up since then (the latest version enables callback functions to be defined etc) but the general idea can be seen.
I should really dig out the latest version of the script and try to get the checkbox/radiobutton validation integrated!
Form validation is a million dollar question though and no one solution suits everyone. It’s certainly one of those topics that seems easy enough on the surface but is anything but when studied for any length of time… in fact, I would class it as the webs biggest script nightmare…
As usual, take care my man, nice to see youre still finding the time to post to the blog (how do you manage to do it? Please tell!)
P.S. Nathan, I shall reply to your email… sorry it’s taken so long; it’s certainly nothing personal!
@frequency decoder – Trust me, had the script you wrote for form validation included error handling for radio and checkbox inputs I would have been all over it. Before you mentioned it today I was drooling over its functionality.
I spent a good 30 or 40 hours working on the script I manipulated/created. And heck, I had a head start working from a code base. I eagerly await a new version of the form script you created. I like the comment idea…very clever.
And well I find the time I guess because a lot of the stuff that I post has merit in my day to day work that is done for my current employer.
Take care
Wow, Cody, this is incredible stuff! Very functional and clean.
Thanks for sharing.
This is the most complete unobtrusive validation script on the web! Hands down!
I spent hours finding and testing half a dozen scripts claiming to be the greatest. I spent a couple hours dissecting this one and working it into my code so I can call it dynamically.
The only problem I have is that when you have 2 select dropdowns, the script does not validate properly for both. It throws the error for one (in the wrong place) and no error at all for the other.
Any ideas on a fix for this? My JS coding is a bit rusty…
Josen
josen at gomotorsports dot com
@josen – I updated the example(html) to reflect how two dropdowns can be used. Hope this helps.
Hi, this is really useful, great work.
@Tony – Why thank you.
Cody, You’re awesome. This is the perfect script. Thanks for all the time you put into it. AND you write gorgeous code to boot… that’s nice to see. You’re the man.
@Rob – Thanks Rob, glad it’s of use to you.
Thanks for your Script.
Another question, I try to call .asp (it work with other simple form) to send this form to an email address but it fail, how should I do it, i’m 100% new on scripting and web.
Hi everybody
I have played around your code Cody
Well I dont think it’s perferct but it is more inobious eg: vf=”numeric=[1]” as attribut
the code now is Object Oriented thus can be extended
known issue:
suppose we put 2 validation conditions if one is true the input is then valide even the second condition is false
please take a look at the script let me think what do you think about it and how we can improve it together.
you can see a demo and download the script at http://www.tus.com.tn/area51/lab/vf/vf.htm
you can host it here if you want since it’s my company’s site
Hey great script! Thanks for sharing!
Great work dude =)
Hi,
http://www.phpclasses.org/browse/package/1.htmlI think your script rocks. I have been looking around on the net for the perfect javascript form validation script. I must say that yours and the ‘Frequency-Decoder’ are the best so far. I am a php programmer and need a decend client side validation. There is also a very good class from Manuel Lemos at:
This is a great class, probably the best, most feature packed out there. It produces the code for javascript and php(server side) on the fly. The problem with classes is that you have the huge amount of overhead even though you might only use 25% of the functionality.
I tried your javascript ‘live’ form validation and was wondering if someone can help with with the function stripWhitespace(). I somehow can’t get it to do anything. In the forms I currently use, it automatically strips the whitspaces from the beginning and end of a input field as soon as the user clicks on another field. This is very important, even though most validations ignore this matter, when you try to login somewhere.
I had this happen to me on very popular sites like Godaddy.com where you try to login in and constantly get rejected just because you had an invisible empty space at the end of your UserName. How frustrating.
I hope someone can help me with this.
Thank you very much for your great programming efforts.
P.S. I tried to take a look a the previous posts link but the page could not be found at this url:
http://www.tus.com.tn/area51/lab/vf/vf.htm
Best regards,
Chris
most of these js codes are overkill and way too complicated to understand, there needs to be an more easy set up where we can simply add the item names to the js code
how about a js code that only has a few lines and we can easily understand how to add validation to any of the items in our form hmmm now that’s would be a miracle lol
If I set a control as optional, what other kung fu do I need to get it to validate if it has a value in it when the submit button is pressed for the form?
The script would seem to be having problems.. if there is a fieldset tag the script throws the following javascript error “Error: t has no properties”
This is running no OS S 10.4.6 Firefox 1.5.0.7
Any ideas of a fix..
regards
Steven
Very useful script, I have been looking for quite a while for such a script.
Additional feature would be nice: Image verification to the form
If you enhance your script with Image verification functionality please let me know. I tried but failed, Sorry I cannot code :-)
I’d like to see some dependency options. For example: if option “A” is selected from a radio group, a select menu is required. If options “B” or “C” are selected from the same radio group, a select menu is NOT required.
Thanks Cody!
I’ve been experimenting with libraries such as Zebda (http://labs.cavorite.com/zebda/) and Dojo – but this more lightweight and optimised for my needs.
You’re a legend!
Good
You should probably include some validation on this page lol.
hi every one there i am confused with select box and check box validation.i am putting the right code but still it s not working please help me