Introduction
Javascript alert boxes have long been used for validating HTML forms. For example, if you forget to type your name into a contact form, then a Javascript alert pops up telling you about your error and how to correct it. While this is a lot better than no warning message or validation at all, I find alert messages quite annoying, ugly and outdated.
What I’d like to do in this article, is show you a more elegant way of displaying error messages cleanly, using some easy to implement Javascript. This not only makes your forms a lot cleaner and more usable, but also shows your attention to detail as a web designer.
The Finished Product
Here
Hi Eddie, Thanks for the excellent explanation of inline form validation. Your article taught me just what i needed.
You guys are so smart! I am jealous!
Have been searching for the 'simple' answer all night – thanks for making it easy to understand.
That is so cool.
And all this time Ive been using alert boxes.
Never again
Very nice, thank you very much for explaining this clearly!
Brilliant! Thank you for the wonderful tutorial.
Very useful thank u very much
Very Nice, but what if Java is disabled? This is what I am looking for, but I want it all to be server-side based.
[Editors note] Hi Byron, it's very rare these days that JavaScript is disabled. I'd say it's enabled on 99% of PC's. If it is disabled you'd have to use a server-side validation technique.
Straight to the point. Thanks for the example!
Fantastic explanation that was ideal to solve my problem. Liked the step-by-step approach.
Great!
I have been looking for something smart for a while and didn't find anything….. your script is great as so simple… it makes me flush to see how simple things can be….. when you are skilled.
Thanks again,
Philippe
Nice, very Nice…simple, cleare and informative.
Well done
Thanks so much for the script. I have looked everywhere for something like it and appreciate your sharing it.
Thank You for letting me leave the use of alert boxes behind.
This was what I wanted
Very effective for the website verification. Thanks for the content it is useful for all.
good stuff
very simple n useful. pls teach some more useful scripting..
I've have not seen a more elegant yet simple piece of script. So easy to modify.
Very nice work! A big thanks!!!
Excellent work you have done.
I inspired and adoptted your coding.
thanks a lot my friend.
Its what i was looking for and need of the hour thanx a lot
i can't tell you how great it was to come across this. i've been using complicated php-scripts on receiving end to validate and now i can move those rules back here and pre-validate.
thanks for being so bloody clear and such a simple example!
btw, if you add {font-family:Tahoma;font-size:8px;} you can eliminate alot of the repeated CSS.
simply Fantastic!
hi! your explanation realy good…keep on..
Dead On! This was short, concise, and to the point.
Excellent explaination and example.
I would love to see a similar walkthrough for radio buttons, but with a little sleep and this example, I'm sure I can figure it out.
Well Done!!
GREAT – thank you – and it teaches me about hidding and showing elements too
Very good Example
God bless you. I have been trying to figure this out for a class. The prof keeps giving hints. We are allowed to find answers online.
I just didn't know the term "inline".
awesome, any easy way to validate the email for correct formatting; ie. a real email address?
Interesting, but what I am looking for is something that will validate fields as the user exits each one. onblur() I suppose… Any ideas on that?
Digg it!
Brilliant cheers!
It's really fantastic.It is explained in so simple way.This is what i wanted.Thank You
Thank you for such clear explanation and for sharing this code. I am wondering how you would use this code with two forms on the same page.
THANK YOU! Just what i needed.
And guess what: Simple clean code and works just like a dream!
Wow the simple answer I was looking for!!!!!
wow amazing ! what I was looking for!
Muito bom!!! Very good!
Great script, I’ve been looking for this for a while. The only problem I’ve found is that I can’t seem to get it to work in Firefox, it works perfectly in IE7 so I don’t know what is wrong there. If you have any suggestions then I would appreciate it. Javascript is definately enabled in FF before you ask.
Many thanks,
Alex
Thanks !
This is exactly what I was looking for.