Dynamic JavaScript Form Validation

Message Screenshot

This lightweight JavaScript form validation allows you to easily add attractive validation messages to your forms. There is no markup to add on your existing page. Just call the inlineMsg() function when you wish to display a message. The position of the form element (or any other element) is dynamically calculated.

Call the function as follows.

inlineMsg('name','You must enter your name.',2);

The first parameter is the id of the element you wish to display the warning in relation to. The second is the string you wish to display in the message box. You can include HTML, just be sure and escape when necessary. The third parameter is the time to display the message in seconds. It is optional and if left empty will default to the MSGHIDE variable in the JavaScript which is initially set to 3.

This script has been tested in all major browsers and is available free of charge for both personal or commercial projects under the creative commons license. Community support is available here. Paid support is also available, contact me for details.

Click here for the demo.

Click here to download the source.

Update 5/5/2008 – Updated the script to focus to the erroneous textbox when displaying an alert. Thanks to mbh for the suggestion.
Update 6/2/2008 – Resolved issue with form field focus on non textbox fields. Added select dropdown to the demo and source.

Posted by Michael in Design, JavaScript on April 30, 2008

http://www.hi-powered.com Ian Beadle

Excellent work – very useful.
Many thanks
http://www.capalls.com/ Fred

The presentation looks very nice! I am having a slight issue, when I have a large form with the submit button at the bottom of say 2 pages, the script should maybe scroll the page up to the location of the error message.

It should be a simple function to plug in to achieve this?
window.scroll(x,y);
http://www.leigeber.com Michael

@Fred – Absolutely, you could add in a window.scroll and position the y to the value of topposition plus some offset value. If you have any questions or need help just shoot me an email. Thanks for the feedback.
http://www.capalls.com Fred

What I used was:

window.scroll(0,topposition – 40);

right after var leftposition in the function for inlineMsg, it’s working very nicely and looks great!
http://n/a mbh

Hey Michael… just curious… in testing in Firefox (maybe it doesn’t for any browser) I noticed the focus doesn’t go to the particular field.

If my test is correct… is there too much going (conflicting functions) or could the FOCUS be placed on the field in error without much trouble?

Thanks
http://www.leigeber.com Michael

@mbh – There must be a problem as the whole purpose of the function is for it to mark the erroneous field. Are you testing via the demo link or after you have integrated with your existing code? Shoot me a link via email and I will take a look.
http://n/a mbh

Hmmmmmmmmmm…. I’m using FF 2.0.0.14… using the demo on your site. The message appears but the field focus doesn’t.

First I thought the NOSCRIPT add-in might be blocking the focus.. but I allowed leigeber.com and it still didn’t quite do it’s FOCUS thing.

You know how these things go… it might well be working for all other FF 2.0.0.14 users. I’ve tested 5 more times from different angles and no success yet. Shoot it could even be another add-in it’s conflicting with for some reason. I’ll keep trying as I love your smooth scripts.
http://n/a mbh

Hmmmmmm IE6 did not get me all the way across the street either. I’ll try it on some other systems as time permits!
http://www.leigeber.com Michael

@mbh – I totally misunderstood you the first time through. I thought you were referring to the error message not not being next to the appropriate textbox, sorry about that. I will get the focus added in here in a few and repackage it for you to download. Thanks for the suggestion.
http://www.leigeber.com Michael

@mbh – I have updated the script by adding line 65 “targetdiv.select();” which will select the content of the textbox with the error. Sorry again for the confusion.
http://n/a mbh

Thanks so much!!! Got the stuff to work in FF and IE. Had trouble with the focus from my local machine… but I’ll track that as it indeed appears noscript is hanging that up from the local end!!!

Appreciate the response/time. Smooth smooth scripts — I’ll have to keep an eye on your work. I’ve seen wayyyyyyyyyyyy too many scripts in my day… these seem to have that little extra “touch”, whatever it is.

thanks…………..
Pingback: Dynamic Inline JavaScript Form Validation
Pingback: Mensajes dinámicos javascript en tus formularios | miguelpuig.com
MsDacia

Is there a way to turn off the fade function, so that when a user gets an error, it remains on the page, until the error has been corrected?
http://www.leigeber.com Michael

@MsDacia – Sure, you could change the script around so it validates when a user leaves a textfield or until they click submit again. You could just set the autohide parameter to a very large number or remove lines 74-77 altogether. Let me know if you run into any problems.
http://www.virtualexecservices.ca/contact_test2.shtml Dave

hello Michael
great script … TY … having challenges with FF validation works fine with IE but does not process with IE … simply submits … thoughts … TY in advance
http://www.leigeber.com Michael

@Dave – I quickly went through and validated your page and wired up the JavaScript externally and things worked for me. I would start off by running the site through the W3C validator and go from there. Shoot me an email if you can’t get it working after trying that.
http://www.virtualexecservices.ca/contact_test2.shtml Dave

Hello Michael
any additional assistance would be welcome … I have been struggling with the Firefox issue i am experiencing … still not calling the validation script but in IE it is funtioning extremely well … expecting it to be a user error on my side actually
http://www.leigeber.com Michael

@Dave – It doesn't look like you got the site validating, as I mentioned before after I validated the site and took the JS external the script worked as expected. If you need help send me an email.
Anil

I got this all working but I am having trouble trying to adapt it to a select box (drop down list). Can you point me in the right direction of what I need to do. – thanks
http://www.leigeber.com Michael

@Anil – Shoot me an email with a link and I will take a look.
Anil

Hi Michael,
Actually I have gotten it working with select boxes. I figured out that the problem was. The line “targetdiv.select()” when used with a control other than an input field is invalid (I am using a select). Instead of doing this I simply set the focus (i.e. targetdiv.focus). Not exactly the same effect but it works. Thanks for sharing – great script.
http://www.leigeber.com Michael

@Anil – Thanks for pointing that out. I will take a look at my code and update it to accommodate focus of any for element.
Ruben

Seems clean and well done. Thanks for the script!
Ruben

Someone had issues with the “select” html form type? Everything works perfectly, but i’ve still troubles to put the “select” working. Even with the demo code, i’ve just inserted a select, and still don’t work. Worth of it, it skip the validation process and show the success.html page.
http://www.leigeber.com Michael

@Ruben – Just updated the post with a fix.
Ruben

@Michael – As I said: “Seems clean and well done. Thanks for the script!” and now thanks for the fix
http://www.thegenepool.nl/profkienstra Prof Kienstra

another great tutorial.. should be digged
janet

am trying to validate for large amount of data and i cant seem to get it to work. although am relatively new to javascript. so am i to start learning from the beginning or what
http://www.leigeber.com Michael

janet – Shoot me an email with a link so I can take a look, large forms should cause no problem.
Pingback: WanderingBit · Just another place to wander
http://cleanplate.biz Jason

This is a great tutorial…what sends the data though?

Do I need to apply my own processor?
http://www.leigeber.com Michael

@Jason – Yes, you would need to validate the data on your own. If you look at the JavaScript you will see how it is being done now. I do plan on putting together a validation library at some point though.
http://www.cfcms.nl cfcms

and here the form example

<form method=”post” action=”#” onsubmit=”return validateForm(new Array(‘gender|V|Please select’,'som|S|Only <strong>numbers</strong> !’,'housenumber|C|only numbers…’,'compagny|V|Fill in a compagny name!’,'emailadress|E|No valid emailadress!’));”>
Straatnaam <input type=”text” id=”street” name=”street” value=”" /><br />
Huisnummer <input type=”text” id=”housenumber” name=”housenumber” value=”" /><br />
Bedrijfsnaam <input type=”text” id=”compagny” name=”compagny” value=”" /><br />
E-mailadres <input type=”text” id=”emailadress” name=”emailadress” value=”" /><br />
Som <input type=”text” id=”som” name=”som” value=”" /><br />
<select name=”gender” id=”gender”>
<option value =”">Select</option>
<option value =”male”>male</option>
<option value =”female”>female</option>
</select>
<input type=”submit”>
</form>

Let me know what you think
http://www.leigeber.com Michael

@cfcms – Your JavaScript was a bit too large to post. I will take a closer look at it later on and if it looks good include it in version 2. I had some stuff planned you may or may not have addressed. Thanks a bunch for sharing.
http://cleanplate.biz Jason

Michael,

I combined your slick presentation with this free processor:

http://phpformgen.sourceforge.net/new_demo/phpformgen/

They played well together. Thanks for making my forms look so cool!
Trebek

Great script man!

Really simple to follow, well documented and gives a VERY professional effect. Only took me about 5 minutes to integrate it (although now I want to re-write ALL my form validation to include it!)

Much obliged for the code, keep it up!
http://rvoa.co.uk paul

Hi

Im trying to use your script – without success.

I have a PHP script on the page, which sends my form fields to a database.

Is this PHP likely to be causing the problem?

Paul
vartika

i have a problem can’t integrate it to my java based web-project.
are there any specifics as to where to store the css file etc.
i am using struts and hibernate.
http://www.leigeber.com Michael

@Paul – PHP would cuase no problem at all, shoot me a link via email and I will take a look.

@vartika – I would need a link to investigate, there is nothing that would need to be done differently being a Java project.
Chesh

This is an awesome piece of code – thanks!
I’ve got a form which is getting quite a lot of Bot Spam though it at the moment and i’m trying to find a RegEx for numeric values or – preferably – one which brings up an error if it discovers ‘http://’ in the message.
Any help would be appreicated!
http://www.leigeber.com Michael

If you are just wanting to check for the http:// you can use the string.indexOf(“http://”). If it returns anything but a -1 you know the string is not contained in the input.
Ramesh

Hi Micheal,

Thank you very much for the great piece of java script for form validation. I added some other functions and it is working absolutely brilliant on my localhost(apache). But when I uploaded to server, error message boxes are not showing. But, it is pointing back to the text field.
Any help?
Thanking you.
Jake

While this is a lightweight, I feel that <a href=”http://livevalidation.com/”> live validation is much better </a>. Live Validation allows for a lot more adjustments. But if you are looking for something plain and simple, this is nice.
http://www.leigeber.com Michael

@Ramesh – Shoot me an email with the link and I will take a look.
Susiana

Hi Michael,
its great javascript code, but i cannot add number form validation for postal code and phone number. Can you help me?
thanks
Erin

Hi Michael,

Beautiful script. Is there a way to show all the error messages at the same time, rather than one at a time in order of validation?

Thanks!

Erin
http://www.leigeber.com Michael

@Susiana – You would just need to add another Regex expression check in the first function. Feel free to email if you need help.

@Erin – You could modify the first function, currently it breaks after the first issue is detected. It would need a little change in the remaining script as well since currently the same div is being reused for each error individually.
rafael

Muito bom, parabéns!!! Beautiful script!!! Brazil!!! Thanks…
Pingback: Welcome Back! | Division Overlay Blog
Pingback: 16+ Top JavaScript/Ajax Effects for Modern Web Design - aComment.net
Pingback: Liens pour effets Javascripts Web 2.0 | Charlie Nguyen-Duc
Marty Martin

How would I validate a radio button? Is it related to the select box problem above? Also, oddly, when I change the name of my form from “form1″ to “form” to match the script, I get a mysql error that my submitted values do not match the columns in the database. When I change it back to “form1″ the error goes away. Any idea why validating with JavaScript would cause that problem?
http://www.ravennainteractive.com TJ

Have had trouble with getting a phone Regex to work… any thoughts?

thanks

TJ
Carlos

What a great script!

I am trying to get things to work properly like validating checkboxes and radio buttons, but that’s another thing altogether. I guess that’s only a matter of defining the vars and fields and adding the proper validation strings and so on.

My question is.. how can I get the message to display to the left side of the input field rather than to the right?

Thanks all!
Shirong

Work along this lines
//@MSGLEFTOFFSET :
//Specify the displacement px to the right of the input box
// e.g. MSGLEFTOFFSET= 1 , [____] [1 px] [Message]
// e.g. MSGLEFTOFFSET= 1000 , [____] [ 10px ] [Message]
var MSGLEFTOFFSET = 0;
George

Hi Michael – I’m trying to implement your script on my web site (thanks!) – everything seems to be working except for the graphic. Do you have any idea what might be causing this?

I tried putting the graphic in my root, in the image folder, in the JavaScript folder and none of them worked. I’m a bit stomped… Thanks!
George

Oh – I’m also getting this warning in my VS2008 IDE for the messages.js file:

“Error updating JScript IntelliSense: Client-side script IntelliSense information was not generated due to an error in an external script reference”

This warning doesn’t appear for other JS references…
http://da daniel

i just cant get this to work on my wordpress site..
does it suport wordpress comments-popup.php ??

//d
http://www.onealautogroup.com/new2/ford/creditapp.asp sinic

sweet script, altho, im running in to an issue where it works up to X field, in this case, email. once email validates the form wont pick up any of the other “required” fields… skimmed through the comments, didnt see anything on it… any help appreciated!!
http://www.sberube.net/ Simon Bérubé

“You have entered an invalid name” – Simon Bérubé
http://private john henderson

Hi the code sounds quite good. can it actually validate multiple rows? I use dreamweaver with php and mysql and need to validate a form containg records that are all updated at once? Thanks
Izzy

Your demo form returns ‘success’ no matter what is entered in the fields even if all the fields are left empty.

Is the demo broken?
muffy

how can i count the character and give message
Patrick

hi are you add the changes / fixes that you do for other people into the current download for everyone to use? Ex, window x/y position
http://www.primestars.com.ph Rico

This is a really, really neat script…
Just thought of adding radio buttons for validation for someone who’s interested, just add this function inside messages.js:
<code>
// function for radio button validation //
function radioB(btn) {
var cnt = -1;
for (var i=btn.length-1; i > -1; i–) {
if (btn[i].checked) {cnt = i; i = -1;}
}
if (cnt > -1) return btn[cnt].value;
else return null;
}
</code>

..and add this var declaration inside function validate(form):
<code>var frm_gender = radioB(form.gender);</code>

..and you could have something like this in your HTML:
<code>
<label>Gender:</label>
<input name=”gender” type=”radio” id=”gender” value=”Male” />Male
<input name=”gender” type=”radio” id=”gender” value=”Female” />Female
</code>

…and that’s just about it!
http://www.primestars.com.ph Rico

Forgot to include this…
Just place this inside function validate(form):
if(frm_gender == null) {
inlineMsg(‘gender’,'Please select a gender.’,3);
return false;
}
…cheers!
Tonino

This is a really, really neat script…
Just thought of adding radio buttons for validation for someone who’s interested, just add this function inside messages.js:

but where’s messages.js? I’ve only two files, livevalidation_standalone.js and validation.css!
http://www.primestars.com.ph Rico

@Tonino
Please click the download “source code” link at the top of this page.
http://www.fmkhang.150m.com Faiz

i need javascript validation form which is code only in html page of php page not to call any js file i need to understand
http://www.primestars.com.ph Rico

@Faiz
You can try googling on “php form validation” and you can test which one best suits your needs.
Thomas

First off I am new to javascript so this may be a dumb question.

But I am trying to modify this script and add extra fields to the form. but whenever I change the names of the fields in messages.js from say gender to city, the validation wont work? it only works if I name everything message or message2 message3 etc.

any help would be greatly appreciated.

P.S. Thanks for the great code!
http://www.codejoin.com codejoin

Hi all and many thanks Michael. I use this script into a IFRAME and when the message pops up on most right margin, part of it disappares. I am a new on CSS: how can I make the message popup as top most window? (I mean over the IFRAME container itself?).
Any help would be greatly appreciated.
http://www.whitebeard.org Kadir

Hi Michael,
first of all i must say that it is an excellent script, but i have a problem about the radio buttons. it doesnt work. i have tried a script where is above this post that radioB function but not work.

When control the radio button value with an if clause, it always show the message box even if the value confirmation is true… Could you help me pls? and how can we use this script with check boxes too. but radio button is so important…
http://www.primestars.com.ph Rico

Just copy and paste this function at the bottom of messages.js

// function for radio button validation //
function radioB(btn) {
var cnt = -1;
for (var i=btn.length-1; i > -1; i–) {
if (btn[i].checked) {cnt = i; i = -1;}
}
if (cnt > -1) return btn[cnt].value;
else return null;
}
// end function

and add this var declaration inside function validate(form) also in messages.js:

var frm_gender = radioB(form.gender);
var name = form.name.value;
…rest of code…

and also inside messages.js, copy and paste this:
if(frm_gender == null) {
inlineMsg(’gender’,’Please select a gender.’,3);
return false;
}
if(name == “”) {
inlineMsg(‘name’,'You must enter your name.’,2);
return false;
}
…rest of code…

..and you could have something like this in your HTML:

<label>Gender:</label>
<input name=”gender” type=”radio” id=”gender” value=”Male” />Male
<input name=”gender” type=”radio” id=”gender” value=”Female” />Female

..hope this make things clear…

Cheers!
http://nil charles

hi…

Script is wonderfull. But I can’t validate numbers like phone/pincode.
Pls give me the solution
http://www.inssindia.com Sanvid

in abve one extra curly brasese so use below code ,

for (var i=btn.length-1; i > -1; i–) {
if (btn[i].checked) {cnt = i; i = -1;}
if (cnt > -1) return btn[cnt].value;
else return null;
}

and i would like more script for all the form tag element so please any one can help me.
MH

What about the license? Is this code created by you? Can one use it for free?
Runewake2

This is very useful… My only suggestion is that you have multiple messages pop up. so if you don’t add an email and a name it says both rather then just one… other then that this is very, very nice…
http://www.ukmodelshops.co.uk Adrian Hall

Superb script Mike, thanks.
Been using for a couple of months now with no problems.
One quick question though.
When the field is at the very right of a screen then it adds the bottom scroll bar and makes the comment difficult to see.
Is it possible to have an optional message to appear above or below the field where the error is.
I know this would need a new msg_arrow.gif but may add more flexibility.
If you can help that would be great.
http://fusionweb.co.uk Hrimthurs

Thanks for the radio button code Rico,
I couldn’t get it to work straight away, but I was able to amend the following line to:

for (var i=btn.length-1; i > -1; i–) {

where i– is changed to i–
Seems to make it happy!

Oh, and I noticed that any unused var’s and if’s in the validate(form) section caused the whole script to not work, I’ll have to keep my code tidy
http://fusionweb.co.uk Hrimthurs

…my code got truncated? Must have happened to Rico’s to.
I’ll try again… i- – without the ‘ ‘ or i-space- without the ‘space’
cris_cl

I can’t make the radio button’s validation to work. The last thing I tried was the “i- – without the ‘ ‘ or i-space- without the ’space’” that Hrimthurs mentioned with no success… does anybody have it working on a live site where I can check the .js file please?.

Thanks!
Jake

Thanks alot, it took me a minute to get it working for my site, but now that it does I love it!
Praveen

hey hi .. can someone help me out .. i tried to modulate the above code for a signup form and the HTML part followed as such
————————– HTML—————————————-

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Signup Form – Truston</title>
<link rel=”stylesheet” type=”text/css” href=”messages.css” />
<script type=”text/javascript” src=”messages.js”></script>
<style type=”text/css”>
.style11 {color: #ff0000}
</style>
</head>
<body>
<div id=”wrapper”>
<form name=”form” id=”form” class=”form” onsubmit=”return validate(this);” action=”success.html” method=”post”>
<table align=”center”>
<tr>
<td width=”10″>
</td>
<td width=”120″>
<br>
<br>
<span class=”style11″>Stage 1</span>
</td>
<td width=”450″>
</td>
</tr>
<tr>
<td width=”10″>
</td>
<td width=”120″>
<b>Account Details</b>
</td>
<td width=”450″>
Create your free account by filling in the following details
</td>
</tr>
<tr>
<td width=”10″>
<span class=”style11″>*</span>
</td>
<td width=”120″>
<label for=”uname”>Username:</label>
</td>
<td width=”450″>
<input type=”text” name=”uname” id=”uname” />
</td>
</tr>
<tr>
<td width=”10″>
<span class=”style11″>*</span>
</td>
<td width=”120″>
<label for=”password”>Password:</label>
</td>
<td width=”450″>
<input type=”password” name=”password” id=”password” />
</td>
</tr>
<tr>
<td width=”10″>
<span class=”style11″>*</span>
</td>
<td width=”120″>
<label for=”repassword”>ReEnter Password:</label>
</td>
<td width=”450″>
<input type=”password” name=”repassword” id=”repassword” />
</td>
</tr>
<tr>
<td width=”10″>
</td>
<td width=”120″>
<br>
<br>
<span class=”style11″>Stage 2</span>
</td>
<td width=”450″>
</td>
</tr>
<tr>
<td width=”10″>
</td>
<td width=”120″>
<b>Personal Details</b>
</td>
<td width=”450″>
Fill in the following details to let us know about you
</td>
</tr>
<tr>
<td width=”10″>
<span class=”style11″>*</span>
</td>
<td width=”120″>
<label for=”name”>Full Name:</label>
</td>
<td width=”450″>
<input type=”text” name=”name” id=”name” />
</td>
</tr>
<tr>
<td width=”10″>
<span class=”style11″>*</span>
</td>
<td width=”120″>
<label for=”email”>Email Address:</label>
</td>
<td width=”450″>
<input type=”text” name=”email” id=”email” />
</td>
</tr>
<tr>
<td width=”10″>
<span class=”style11″>*</span>
</td>
<td width=”120″>
<label for=”gender”>Gender:</label>
</td>
<td width=”450″>
<select name=”gender” id=”gender”>
<option value =”">Please Select</option>
<option value =”male”>Male</option>
<option value =”female”>Female</option>
</select>
</td>
</tr>
<tr>
<td width=”10″>
<span class=”style11″>*</span>
</td>
<td width=”120″>
<label for=”country”>Country:</label>
</td>
<td width=”450″>
<select name=”country” id=”country”>
<option value=”1″ >Australia</option>
<option value=”2″ >Bahrain</option>
<option value=”3″ >Bangladesh</option>
<option value=”4″ >Belgium</option>
<option value=”5″ >Canada</option>
<option value=”6″ >Doha</option>
<option value=”7″ >Dubai</option>
<option value=”8″ >France</option>
<option value=”9″ >Germany</option>
<option value=”10″ >Hong Kong</option>
<option value=”11″ SELECTED>India</option>
<option value=”12″ >Indonesia</option>
<option value=”13″ >Ireland</option>
<option value=”14″ >Italy</option>
<option value=”15″ >Japan</option>
<option value=”16″ >Kenya</option>
<option value=”17″ >Kuwait</option>
<option value=”18″ >Lebanon</option>
<option value=”19″ >Libya</option>
<option value=”20″ >Malaysia</option>
<option value=”21″ >Maldives</option>
<option value=”22″ >Mauritius</option>
<option value=”23″ >Mexico</option>
<option value=”24″ >Nepal</option>
<option value=”25″ >Netherlands</option>
<option value=”26″ >New Zealand</option>
<option value=”27″ >Norway</option>
<option value=”28″ >Oman</option>
<option value=”29″ >Pakistan</option>
<option value=”30″ >Qatar</option>
<option value=”31″ >Quilon</option>
<option value=”32″ >Russia</option>
<option value=”33″ >Saudi Arabia</option>
<option value=”34″ >Singapore</option>
<option value=”35″ >South Africa</option>
<option value=”36″ >South Korea</option>
<option value=”37″ >Spain</option>
<option value=”38″ >Sri Lanka</option>
<option value=”39″ >Sweden</option>
<option value=”40″ >Switzerland</option>
<option value=”41″ >Thailand</option>
<option value=”42″ >UAE</option>
<option value=”43″ >UK</option>
<option value=”44″ >US</option>
<option value=”45″ >Yemen</option>
<option value=”46″ >Zimbabwe</option>
<option value=”9999″ >Other</option>
</select>
</td>
</tr>
<tr>
<td width=”10″>
<span class=”style11″>*</span>
</td>
<td width=”120″>
<label for=”clocation”>Current Location:</label>
</td>
<td width=”450″>
<select name=”clocation” id=”clocation”>
<optgroup value=”-1″ style=”BACKGROUND:#D0E0F1;COLOR:#000″ label=”—–Top Metropolitan Cities—–”></optgroup>
<option value=”2″ >Ahmedabad</option>
<option value=”3″ >Bengaluru / Bangalore</option>
<option value=”4″ >Chandigarh</option>
<option value=”5″ >Chennai</option>
<option value=”6″ >Delhi</option>
<option value=”7″ >Gurgaon</option>
<option value=”8″ >Hyderabad / Secunderabad</option>
<option value=”9″ >Kolkata</option>
<option value=”10″ >Mumbai</option>
<option value=”11″ >Noida</option>
<option value=”12″ >Pune</option>
<optgroup value=”-1″ style=”BACKGROUND:#D0E0F1;COLOR:#000″ label=”—–Andhra Pradesh—–”></optgroup>
<option value=”14″ >Anantapur</option>
<option value=”15″ >Guntakal</option>
<option value=”16″ >Guntur</option>
<option value=”17″ >Hyderabad / Secunderabad</option>
<option value=”18″ >Kakinada</option>
<option value=”19″ >Kurnool</option>
<option value=”20″ >Nellore</option>
<option value=”21″ >Nizamabad</option>
<option value=”22″ >Rajahmundry</option>
<option value=”24″ >Tirupati</option>
<option value=”25″ >Vijayawada</option>
<option value=”26″ >Visakhapatnam</option>
<option value=”27″ >Warangal</option>
<option value=”28″ >Andhra Pradesh – Other</option>
<optgroup value=”-1″ style=”BACKGROUND:#D0E0F1;COLOR:#000″ label=”—–Arunachal Pradesh—–”></optgroup>
<option value=”30″ >Itanagar</option>
<option value=”31″ >Arunachal Pradesh – Other</option>
<optgroup value=”-1″ style=”BACKGROUND:#D0E0F1;COLOR:#000″ label=”—–Assam—–”></optgroup>
<option value=”33″ >Guwahati</option>
<option value=”34″ >Silchar</option>
<option value=”35″ >Assam – Other</option>
<optgroup value=”-1″ style=”BACKGROUND:#D0E0F1;COLOR:#000″ label=”—–Bihar—–”></optgroup>
<option value=”37″ >Bahgalpur</option>
<option value=”38″ >Patna</option>
<option value=”39″ >Bihar – Other</option>
<optgroup value=”-1″ style=”BACKGROUND:#D0E0F1;COLOR:#000″ label=”—–Chhattisgarh—–”></optgroup>
<option value=”41″ >Bhillai</option>
<option value=”42″ >Bilaspur</option>
<option value=”43″ >Raipur</option>
<option value=”44″ >Chhattisgarh – Other</option>
<optgroup value=”-1″ style=”BACKGROUND:#D0E0F1;COLOR:#000″ label=”—–Goa—–”></optgroup>
<option value=”46″ >Panjim / Panaji</option>
<option value=”48″ >Vasco Da Gama</option>
<option value=”49″ >Goa – Other</option>
<optgroup value=”-1″ style=”BACKGROUND:#D0E0F1;COLOR:#000″ label=”—–Gujarat—–”></optgroup>
<option value=”51″ >Ahmedabad</option>
<option value=”52″ >Anand</option>
<option value=”53″ >Ankleshwar</option>
<option value=”55″ >Bharuch</option>
<option value=”56″ >Bhavnagar</option>
<option value=”57″ >Bhuj</option>
<option value=”58″ >Gandhinagar</option>
<option value=”59″ >Gir</option>
<option value=”60″ >Jamnagar</option>
<option value=”61″ >Kandla</option>
<option value=”62″ >Porbandar</option>
<option value=”63″ >Rajkot</option>
<option value=”64″ >Surat</option>
<option value=”65″ >Vadodara / Baroda</option>
<option value=”66″ >Valsad</option>
<option value=”67″ >Vapi</option>
<option value=”68″ >Gujarat – Other</option>
<optgroup value=”-1″ style=”BACKGROUND:#D0E0F1;COLOR:#000″ label=”—–Haryana—–”></optgroup>
<option value=”70″ >Ambala</option>
<option value=”71″ >Chandigarh</option>
<option value=”72″ >Faridabad</option>
<option value=”73″ >Gurgaon</option>
<option value=”74″ >Hisar</option>
<option value=”75″ >Karnal</option>
<option value=”76″ >Kurukshetra</option>
<option value=”77″ >Panipat</option>
<option value=”78″ >Rohtak</option>
<option value=”79″ >Haryana – Other</option>
<optgroup value=”-1″ style=”BACKGROUND:#D0E0F1;COLOR:#000″ label=”—–Himachal Pradesh—–”></optgroup>
<option value=”81″ >Dalhousie</option>
<option value=”82″ >Dharmasala</option>
<option value=”83″ >Kulu/Manali</option>
<option value=”84″ >Shimla</option>
<option value=”85″ >Himachal Pradesh – Other</option>
<optgroup value=”-1″ style=”BACKGROUND:#D0E0F1;COLOR:#000″ label=”—–Jammu & Kashmir—–”></optgroup>
<option value=”87″ >Jammu</option>
<option value=”88″ >Srinagar</option>
<option value=”89″ >Jammu and Kashmir – Other</option>
<optgroup value=”-1″ style=”BACKGROUND:#D0E0F1;COLOR:#000″ label=”—–Jharkhand—–”></optgroup>
<option value=”91″ >Bokaro</option>
<option value=”92″ >Dhanbad</option>
<option value=”93″ >Jamshedpur</option>
<option value=”94″ >Ranchi</option>
<option value=”95″ >Jharkhand – Other</option>
<optgroup value=”-1″ style=”BACKGROUND:#D0E0F1;COLOR:#000″ label=”—–Karnataka—–”></optgroup>
<option value=”97″ >Bengaluru / Bangalore</option>
<option value=”98″ >Belgaum</option>
<option value=”99″ >Bellary</option>
<option value=”100″ >Bidar</option>
<option value=”101″ >Dharwad</option>
<option value=”102″ >Gulbarga</option>
<option value=”103″ >Hubli</option>
<option value=”104″ >Kolar</option>
<option value=”105″ >Mangalore</option>
<option value=”106″ >Mysoru / Mysore</option>
<option value=”107″ >Karnataka – Other</option>
<optgroup value=”-1″ style=”BACKGROUND:#D0E0F1;COLOR:#000″ label=”—–Kerala—–”></optgroup>
<option value=”109″ >Calicut</option>
<option value=”110″ >Cochin</option>
<option value=”111″ >Ernakulam</option>
<option value=”112″ >Kannur</option>
<option value=”113″ >Kochi</option>
<option value=”114″ >Kollam</option>
<option value=”115″ >Kottayam</option>
<option value=”116″ >Kozhikode</option>
<option value=”117″ >Palakkad</option>
<option value=”118″ >Palghat</option>
<option value=”119″ >Thrissur</option>
<option value=”120″ >Trivandrum</option>
<option value=”121″ >Kerala – Other</option>
<optgroup value=”-1″ style=”BACKGROUND:#D0E0F1;COLOR:#000″ label=”—–Madhya Pradesh—–”></optgroup>
<option value=”123″ >Bhopal</option>
<option value=”124″ >Gwalior</option>
<option value=”125″ >Indore</option>
<option value=”126″ >Jabalpur</option>
<option value=”127″ >Ujjain</option>
<option value=”128″ >Madhya Pradesh – Other</option>
<optgroup value=”-1″ style=”BACKGROUND:#D0E0F1;COLOR:#000″ label=”—–Maharashtra—–”></optgroup>
<option value=”130″ >Ahmednagar</option>
<option value=”131″ >Aurangabad</option>
<option value=”132″ >Jalgaon</option>
<option value=”133″ >Kolhapur</option>
<option value=”134″ >Mumbai</option>
<option value=”135″ >Mumbai Suburbs</option>
<option value=”136″ >Nagpur</option>
<option value=”137″ >Nasik</option>
<option value=”138″ >Navi Mumbai</option>
<option value=”139″ >Pune</option>
<option value=”140″ >Solapur</option>
<option value=”141″ >Maharashtra – Other</option>
<optgroup value=”-1″ style=”BACKGROUND:#D0E0F1;COLOR:#000″ label=”—–Manipur—–”></optgroup>
<option value=”143″ >Imphal</option>
<option value=”144″ >Manipur – Other</option>
<optgroup value=”-1″ style=”BACKGROUND:#D0E0F1;COLOR:#000″ label=”—–Meghalaya—–”></optgroup>
<option value=”146″ >Shillong</option>
<option value=”147″ >Meghalaya – Other</option>
<optgroup value=”-1″ style=”BACKGROUND:#D0E0F1;COLOR:#000″ label=”—–Mizoram—–”></optgroup>
<option value=”149″ >Aizawal</option>
<option value=”150″ >Mizoram – Other</option>
<optgroup value=”-1″ style=”BACKGROUND:#D0E0F1;COLOR:#000″ label=”—–Nagaland—–”></optgroup>
<option value=”152″ >Dimapur</option>
<option value=”153″ >Nagaland – Other</option>
<optgroup value=”-1″ style=”BACKGROUND:#D0E0F1;COLOR:#000″ label=”—–Orissa—–”></optgroup>
<option value=”155″ >Bhubaneshwar</option>
<option value=”156″ >Cuttack</option>
<option value=”157″ >Paradeep</option>
<option value=”158″ >Puri</option>
<option value=”159″ >Rourkela</option>
<option value=”160″ >Orissa – Other</option>
<optgroup value=”-1″ style=”BACKGROUND:#D0E0F1;COLOR:#000″ label=”—–Punjab—–”></optgroup>
<option value=”162″ >Amritsar</option>
<option value=”163″ >Bathinda</option>
<option value=”164″ >Chandigarh</option>
<option value=”165″ >Jalandhar</option>
<option value=”166″ >Ludhiana</option>
<option value=”167″ >Mohali</option>
<option value=”168″ >Pathankot</option>
<option value=”169″ >Patiala</option>
<option value=”170″ >Punjab – Other</option>
<optgroup value=”-1″ style=”BACKGROUND:#D0E0F1;COLOR:#000″ label=”—–Rajasthan—–”></optgroup>
<option value=”172″ >Ajmer</option>
<option value=”173″ >Jaipur</option>
<option value=”174″ >Jaisalmer</option>
<option value=”175″ >Jodhpur</option>
<option value=”176″ >Kota</option>
<option value=”177″ >Udaipur</option>
<option value=”178″ >Rajasthan – Other</option>
<optgroup value=”-1″ style=”BACKGROUND:#D0E0F1;COLOR:#000″ label=”—–Sikkim—–”></optgroup>
<option value=”180″ >Gangtok</option>
<option value=”181″ >Sikkim – Other</option>
<optgroup value=”-1″ style=”BACKGROUND:#D0E0F1;COLOR:#000″ label=”—–Tamil Nadu—–”></optgroup>
<option value=”183″ >Chennai</option>
<option value=”184″ >Coimbatore</option>
<option value=”185″ >Cuddalore</option>
<option value=”186″ >Erode</option>
<option value=”187″ >Hosur</option>
<option value=”188″ >Madurai</option>
<option value=”189″ >Nagercoil</option>
<option value=”190″ >Ooty</option>
<option value=”191″ >Salem</option>
<option value=”192″ >Thanjavur</option>
<option value=”193″ >Tirunalveli</option>
<option value=”194″ >Trichy</option>
<option value=”195″ >Tuticorin</option>
<option value=”196″ >Vellore</option>
<option value=”197″ >Tamil Nadu – Other</option>
<optgroup value=”-1″ style=”BACKGROUND:#D0E0F1;COLOR:#000″ label=”—–Tripura—–”></optgroup>
<option value=”199″ >Agartala</option>
<option value=”200″ >Tripura – Other</option>
<optgroup value=”-1″ style=”BACKGROUND:#D0E0F1;COLOR:#000″ label=”—–Union Territories—–”></optgroup>
<option value=”202″ >Chandigarh</option>
<option value=”203″ >Dadra & Nagar Haveli – Silvassa</option>
<option value=”204″ >Daman & Diu</option>
<option value=”205″ >Delhi</option>
<option value=”206″ >Pondicherry</option>
<optgroup value=”-1″ style=”BACKGROUND:#D0E0F1;COLOR:#000″ label=”—–Uttar Pradesh—–”></optgroup>
<option value=”208″ >Agra</option>
<option value=”209″ >Aligarh</option>
<option value=”210″ >Allahabad</option>
<option value=”211″ >Bareilly</option>
<option value=”212″ >Faizabad</option>
<option value=”213″ >Ghaziabad</option>
<option value=”214″ >Gorakhpur</option>
<option value=”215″ >Kanpur</option>
<option value=”216″ >Lucknow</option>
<option value=”217″ >Mathura</option>
<option value=”218″ >Meerut</option>
<option value=”219″ >Moradabad</option>
<option value=”220″ >Noida</option>
<option value=”221″ >Varanasi / Banaras</option>
<option value=”222″ >Uttar Pradesh – Other</option>
<optgroup value=”-1″ style=”BACKGROUND:#D0E0F1;COLOR:#000″ label=”—–Uttaranchal—–”></optgroup>
<option value=”224″ >Dehradun</option>
<option value=”225″ >Roorkee</option>
<option value=”226″ >Uttaranchal – Other</option>
<optgroup value=”-1″ style=”BACKGROUND:#D0E0F1;COLOR:#000″ label=”—–West Bengal—–”></optgroup>
<option value=”228″ >Asansol</option>
<option value=”229″ >Durgapur</option>
<option value=”230″ >Haldia</option>
<option value=”231″ >Kharagpur</option>
<option value=”232″ >Kolkata</option>
<option value=”233″ >Siliguri</option>
<option value=”234″ >West Bengal – Other</option>
</select>
</td>
</tr>
<tr>
<td width=”10″>
</td>
<td width=”120″>
<br>
<br>
<span class=”style11″>Stage 3</span>
</td>
<td width=”450″>
</td>
</tr>
<tr>
<td width=”10″>
</td>
<td width=”120″>
<b>Education Details</b>
</td>
<td width=”450″>
Fill details to let the recruitors know your educational qualifications
</td>
</tr>
<tr>
<td width=”10″>
<span class=”style11″>*</span>
</td>
<td width=”120″>
<label for=”collegename”>College Name:</label>
</td>
<td width=”450″>
<input type=”text” name=”collegename” id=”collegename” />
</td>
</tr>
<tr>
<td width=”10″>
<span class=”style11″>*</span>
</td>
<td width=”120″>
<label for=”graduation”>Year of Graduation:</label>
</td>
<td width=”450″>
<select name=”graduation” id=”graduation”>
<option value=”1980″>1980</option>
<option value=”1981″>1981</option>
<option value=”1982″>1982</option>
<option value=”1983″>1983</option>
<option value=”1984″>1984</option>
<option value=”1985″>1985</option>
<option value=”1986″>1986</option>
<option value=”1987″>1987</option>
<option value=”1988″>1988</option>
<option value=”1989″>1989</option>
<option value=”1990″>1990</option>
<option value=”1991″>1991</option>
<option value=”1992″>1992</option>
<option value=”1993″>1993</option>
<option value=”1994″>1994</option>
<option value=”1995″>1995</option>
<option value=”1996″>1996</option>
<option value=”1997″>1997</option>
<option value=”1998″>1998</option>
<option value=”1999″>1999</option>
<option value=”2000″>2000</option>
<option value=”2001″>2001</option>
<option value=”2002″>2002</option>
<option value=”2003″>2003</option>
<option value=”2004″>2004</option>
<option value=”2005″>2005</option>
<option value=”2006″>2006</option>
<option value=”2007″>2007</option>
<option value=”2008″ selected>2008</option>
<option value=”2009″>2009</option>
<option value=”2010″>2010</option>
</select>
</td>
</tr>
<tr>
<td width=”10″>
<span class=”style11″>*</span>
</td>
<td width=”120″>
<label for=”degree”>Degree:</label>
</td>
<td width=”450″>
<input type=”text” name=”degree” id=”degree” />
</td>
</tr>
<tr>
<td width=”10″>
<span class=”style11″>*</span>
</td>
<td width=”120″>
<label for=”branch”>Branch:</label>
</td>
<td width=”450″>
<input type=”text” name=”branch” id=”branch” />
</td>
</tr>
<tr>
<td width=”10″>
<span class=”style11″>*</span>
</td>
<td width=”120″>
<label for=”cgpa”>CGPA/Percentage:</label>
</td>
<td width=”450″>
<input type=”text” name=”cgpa” id=”cgpa” />
</td>
</tr>
<tr>
<td width=”10″>
</td>
<td width=”120″>
<br>
<br> 10th Details->
</td>
<td width=”450″>
</td>
</tr>
<tr>
<td width=”10″>
<span class=”style11″>*</span>
</td>
<td width=”120″>
<label for=”boardschoolname”>School Name:</label>
</td>
<td width=”450″>
<input type=”text” name=”boardschoolname” id=”boardschoolname” />
</td>
</tr>
<tr>
<td width=”10″>
<span class=”style11″>*</span>
</td>
<td width=”120″>
<label for=”boardyear”>Year of Passing:</label>
</td>
<td width=”450″>
<select name=”boardyear” id=”boardyear”>
<option value=”1980″>1980</option>
<option value=”1981″>1981</option>
<option value=”1982″>1982</option>
<option value=”1983″>1983</option>
<option value=”1984″>1984</option>
<option value=”1985″>1985</option>
<option value=”1986″>1986</option>
<option value=”1987″>1987</option>
<option value=”1988″>1988</option>
<option value=”1989″>1989</option>
<option value=”1990″>1990</option>
<option value=”1991″>1991</option>
<option value=”1992″>1992</option>
<option value=”1993″>1993</option>
<option value=”1994″>1994</option>
<option value=”1995″>1995</option>
<option value=”1996″>1996</option>
<option value=”1997″>1997</option>
<option value=”1998″>1998</option>
<option value=”1999″>1999</option>
<option value=”2000″>2000</option>
<option value=”2001″>2001</option>
<option value=”2002″ selected>2002</option>
<option value=”2003″>2003</option>
<option value=”2004″>2004</option>
<option value=”2005″>2005</option>
<option value=”2006″>2006</option>
<option value=”2007″>2007</option>
<option value=”2008″>2008</option>
<option value=”2009″>2009</option>
<option value=”2010″>2010</option>
</select>
</td>
</tr>
<tr>
<td width=”10″>
<span class=”style11″>*</span>
</td>
<td width=”120″>
<label for=”boardpercentage”>Percentage:</label>
</td>
<td width=”450″>
<input type=”text” name=”boardpercentage” id=”boardpercentage” />
</td>
</tr>
<tr>
<td width=”10″>
</td>
<td width=”120″>
<br>
<br> 12th Details->
</td>
<td width=”450″>
</td>
</tr>
<tr>
<td width=”10″>
<span class=”style11″>*</span>
</td>
<td width=”120″>
<label for=”seniorschoolname”>School Name:</label>
</td>
<td width=”450″>
<input type=”text” name=”seniorschoolname” id=”seniorschoolname” />
</td>
</tr>
<tr>
<td width=”10″>
<span class=”style11″>*</span>
</td>
<td width=”120″>
<label for=”senioryear”>Year of Passing:</label>
</td>
<td width=”450″>
<select name=”senioryear” id=”senioryear”>
<option value=”1980″>1980</option>
<option value=”1981″>1981</option>
<option value=”1982″>1982</option>
<option value=”1983″>1983</option>
<option value=”1984″>1984</option>
<option value=”1985″>1985</option>
<option value=”1986″>1986</option>
<option value=”1987″>1987</option>
<option value=”1988″>1988</option>
<option value=”1989″>1989</option>
<option value=”1990″>1990</option>
<option value=”1991″>1991</option>
<option value=”1992″>1992</option>
<option value=”1993″>1993</option>
<option value=”1994″>1994</option>
<option value=”1995″>1995</option>
<option value=”1996″>1996</option>
<option value=”1997″>1997</option>
<option value=”1998″>1998</option>
<option value=”1999″>1999</option>
<option value=”2000″>2000</option>
<option value=”2001″>2001</option>
<option value=”2002″>2002</option>
<option value=”2003″>2003</option>
<option value=”2004″ selected>2004</option>
<option value=”2005″>2005</option>
<option value=”2006″>2006</option>
<option value=”2007″>2007</option>
<option value=”2008″>2008</option>
<option value=”2009″>2009</option>
<option value=”2010″>2010</option>
</select>
</td>
</tr>
<tr>
<td width=”10″>
<span class=”style11″>*</span>
</td>
<td width=”120″>
<label for=”seniorpercentage”>Percentage:</label>
</td>
<td width=”450″>
<input type=”text” name=”seniorpercentage” id=”seniorpercentage” />
</td>
</tr>
<tr>
<td width=”10″>
</td>
<td width=”120″>
<br>
<br>
<span class=”style11″>Stage 4</span>
</td>
<td width=”450″>
</td>
</tr>
<tr>
<td width=”10″>
</td>
<td width=”120″>
<b>Contact Details</b>
</td>
<td width=”450″>
Enter the contact details to enable us to communicate with you
</td>
</tr>
<tr>
<td width=”10″>
<span class=”style11″>*</span>
</td>
<td width=”120″>
<label for=”landline”>Landline No:</label>
</td>
<td width=”450″>
<input type=”text” name=”landline” id=”landline” />
</td>
</tr>
<tr>
<td width=”10″>
</td>
<td width=”120″>
<label for=”mobile”>Mobile No:</label>
</td>
<td width=”450″>
<input type=”text” name=”mobile” id=”mobile” />
</td>
</tr>
<tr>
<td width=”10″><span class=”style11″>*</span>
</td>
<td width=”120″>
<label for=”comaddress”>Communicating Address:</label>
</td>
<td width=”450″>
<textarea name=”comaddress” cols=”20″ rows=”4″ id=”comaddress”></textarea>
</td>
</tr>
<tr>
<td width=”10″>
</td>
<td width=”120″>
<label for=”paddress”>Permanent Address:</label>
</td>
<td width=”450″>
<textarea name=”paddress” cols=”20″ rows=”4″ id=”paddress”></textarea>
</td>
</tr>
<tr>
<td width=”10″>

</td>
<td width=”120″>
<br>
<a href=”http://www.daiict.ac.in”>Term & conditions </a>
<br>
<br>
</td>
<td width=”450″>
– I Agree to the terms and Conditions –
</td>
</tr>
<tr>
<td width=”10″>

</td>
<td width=”120″>
<input type=”submit” value=”Submit” class=”submit” />
</td>
<td width=”450″>
<input type=”reset” value=” Reset ” class=”reset” />
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
——————————————————————————-
while my javascript part file is as such ———- messages.js————

// form validation function //
function validate(form) {
var name = form.name.value;
var uname = form.uname.value;
var password = form.password.value;
var repassword = form.repassword.value;
var email = form.email.value;
var gender = form.gender.value;
var country = form.country.value;
var clocation = form.clocation.value;
var collegename = form.collegename.value;
var graduation = form.graduation.value;
var degree = form.degree.value;
var branch = form.branch.value;
var cgpa = form.cgpa.value;
var boardschoolname = form.boardschoolname.value;
var boardyear = form.boardyear.value;
var boardpercentage = form.boardpercentage.value;
var seniorschoolname = form.seniorschoolname.value;
var senioryear = form.senioryear.value;
var seniorpercentage = form.seniorpercentage.value;
var message = form.message.value;
var landline = form.landline.value;
var mobile = form.mobile.value;
var comaddress = form.comaddress.value;
var paddress = form.paddress.value;

var nameRegex = /^[a-zA-Z]+(([\'\,\.\- ][a-zA-Z ])?[a-zA-Z]*)*$/;
var emailRegex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;

if(uname == “”) {
inlineMsg(‘uname’,'You must enter your username.’,2);
return false;
}
if(password == “”) {
inlineMsg(‘password’,'You must enter the passoword.’,2);
return false;
}
if(repassword ==”") {
inlineMsg(‘repassword’,'You must enter the passoword again.’,2);
return false;
}

if(password != repassword ) {
inlineMsg(‘repassword’,'<strong>Error</strong>Your passoword does not match.’,2);
return false;
}

if(name == “”) {
inlineMsg(‘name’,'You must enter your name.’,2);
return false;
}
if(!name.match(nameRegex)) {
inlineMsg(‘name’,'You have entered an invalid name.’,2);
return false;
}
if(email == “”) {
inlineMsg(‘email’,'<strong>Error !</strong><br />Enter your email id.’,2);
return false;
}
if(!email.match(emailRegex)) {
inlineMsg(‘email’,'<strong>Error !</strong><br />You have entered an invalid email.’,2);
return false;
}
if(gender == “”) {
inlineMsg(‘gender’,'<strong>Error !</strong><br />You must select your gender.’,2);
return false;
}
if(country == “”) {
inlineMsg(‘country’,'<strong>Error !</strong><br />Select your Country of origin.’,2);
return false;
}
if(clocation == “”) {
inlineMsg(‘clocation’,'<strong>Error !</strong><br />Select your current location.’,2);
return false;
}
if(collegename == “”) {
inlineMsg(‘collegename’,'<strong>Error !</strong><br />Enter your college name.’,2);
return false;
}
if(!collegename.match(nameRegex)) {
inlineMsg(‘collegename’,'You have entered an invalid college name.’,2);
return false;
}
if(graduation == “”) {
inlineMsg(‘graduation’,'<strong>Error !</strong><br />Select your graduation year.’,2);
return false;
}
if(degree == “”) {
inlineMsg(‘degree’,'Enter your graduation degree.’,2);
return false;
}
if(branch == “”) {
inlineMsg(‘branch’,'You must enter your name.’,2);
return false;
}
if(!branch.match(nameRegex)) {
inlineMsg(‘branch’,'You have entered an invalid branch.’,2);
return false;
}
if(cgpa == “”) {
inlineMsg(‘cgpa’,'Enter your last CGPA.’,2);
return false;
}
if(boardschoolname == “”) {
inlineMsg(‘boardschoolname’,'Enter your 10th school name.’);
return false;
}
if(boardyear== “”) {
inlineMsg(‘boardyear’,'Enter the 10th passing year.’);
return false;
}
if(boardpercentage == “”) {
inlineMsg(‘boardpercentage’,'Enter your 10th percentage.’);
return false;
}
if(seniorschoolname == “”) {
inlineMsg(‘seniorschoolname’,'Enter your 12th school name.’);
return false;
}
if(senioryear== “”) {
inlineMsg(‘senioryear’,'Enter the 12th passing year.’);
return false;
}
if(seniorpercentage == “”) {
inlineMsg(‘seniorpercentage’,'Enter your 12th percentage.’);
return false;
}
if(landline == “”) {
inlineMsg(‘landline’,'Enter your Landline number.’);
return false;
}
if(comaddress == “”) {
inlineMsg(‘comaddress’,'Enter your Communicating address.’);
return false;
}
if(paddress == “”) {
inlineMsg(‘paddress’,'Enter your Permanent address.’);
return false;
}

return true;
}

// START OF MESSAGE SCRIPT //

var MSGTIMER = 20;
var MSGSPEED = 5;
var MSGOFFSET = 3;
var MSGHIDE = 3;

// build out the divs, set attributes and call the fade function //
function inlineMsg(target,string,autohide) {
var msg;
var msgcontent;
if(!document.getElementById(‘msg’)) {
msg = document.createElement(‘div’);
msg.id = ‘msg’;
msgcontent = document.createElement(‘div’);
msgcontent.id = ‘msgcontent’;
document.body.appendChild(msg);
msg.appendChild(msgcontent);
msg.style.filter = ‘alpha(opacity=0)’;
msg.style.opacity = 0;
msg.alpha = 0;
} else {
msg = document.getElementById(‘msg’);
msgcontent = document.getElementById(‘msgcontent’);
}
msgcontent.innerHTML = string;
msg.style.display = ‘block’;
var msgheight = msg.offsetHeight;
var targetdiv = document.getElementById(target);
targetdiv.focus();
var targetheight = targetdiv.offsetHeight;
var targetwidth = targetdiv.offsetWidth;
var topposition = topPosition(targetdiv) – ((msgheight – targetheight) / 2);
var leftposition = leftPosition(targetdiv) + targetwidth + MSGOFFSET;
msg.style.top = topposition + ‘px’;
msg.style.left = leftposition + ‘px’;
clearInterval(msg.timer);
msg.timer = setInterval(“fadeMsg(1)”, MSGTIMER);
if(!autohide) {
autohide = MSGHIDE;
}
window.setTimeout(“hideMsg()”, (autohide * 1000));
}

// hide the form alert //
function hideMsg(msg) {
var msg = document.getElementById(‘msg’);
if(!msg.timer) {
msg.timer = setInterval(“fadeMsg(0)”, MSGTIMER);
}
}

// face the message box //
function fadeMsg(flag) {
if(flag == null) {
flag = 1;
}
var msg = document.getElementById(‘msg’);
var value;
if(flag == 1) {
value = msg.alpha + MSGSPEED;
} else {
value = msg.alpha – MSGSPEED;
}
msg.alpha = value;
msg.style.opacity = (value / 100);
msg.style.filter = ‘alpha(opacity=’ + value + ‘)’;
if(value >= 99) {
clearInterval(msg.timer);
msg.timer = null;
} else if(value <= 1) {
msg.style.display = “none”;
clearInterval(msg.timer);
}
}

// calculate the position of the element in relation to the left of the browser //
function leftPosition(target) {
var left = 0;
if(target.offsetParent) {
while(1) {
left += target.offsetLeft;
if(!target.offsetParent) {
break;
}
target = target.offsetParent;
}
} else if(target.x) {
left += target.x;
}
return left;
}

// calculate the position of the element in relation to the top of the browser window //
function topPosition(target) {
var top = 0;
if(target.offsetParent) {
while(1) {
top += target.offsetTop;
if(!target.offsetParent) {
break;
}
target = target.offsetParent;
}
} else if(target.y) {
top += target.y;
}
return top;
}

// preload the arrow //
if(document.images) {
arrow = new Image(7,80);
arrow.src = “images/msg_arrow.gif”;
}

yet its just submitting the form without validation.. please help me out .. i tried a lot .
http://www.primestars.com.ph Rico

corrected version for radio button function:

// function for radio button validation //
function radioB(btn) {
var cnt = -1;
for (var i=btn.length-1; i > -1; i–) {
if (btn[i].checked) {cnt = i; i = -1;}
}
if (cnt > -1) return btn[cnt].value;
else return null;
}
// end function

…….follow rest of instructions on my previous post here….
http://www.primestars.com.ph Rico

grrr….it’s not showing proper text…
i- should be i minus minus
http://singulartechnologysolutions.com Michael Condon

I’m having some issues with IE 8 Beta2, in both 8 mode and Compatibility mode, although you say that you verified it there.
With both my code and on your site demo, “You must enter your name” appears as “You must enter your n” (that’s as wide as it gets), and the bottom of the msg div below the text is not visible.
As I said, it happens on your demo – I check to see if I hosed something up. Works excellently in Firefox & Safari. So I guess the onus is on you, unless it’s a browser add-on issue – in which case it’s still a problem for all of us.
Also, using both messages.js & dialog_box.js I had to rename a couple of functions in messages.js. You might want to consider by standard naming your functions more specifically for each js module.
Anyway, I desperately need help with the IE issue. Please, urgent SOS.
http://singulartechnologysolutions.com Michael Condon

Okeydokey, I found the IE issue root cause. I noticed that in comparison to the other browsers, your for and mine seemed a little tiny. I had recently reinstalled IE8 Beta2, and for some reason, the zoom was reset to < 100%.
I set it at 100% and all is fine.
<editorial>So far IE 8 Beta1&2 have been the biggest pain in the ass. For a while, it kept zooming to 150% by default, and I jumped through numerous hoops to get it to 100%, like most normal people use. Once installed, it is nearly impossible to uninstall & reinstall IE7 (I tried, but then IE7 was running using IE8 registry values, which really hosed it up). It’s really slow, and most/all web pages look really mangled in native IE8 mode. I heard they are going to start using Webkit, which I hope they do before their final IE8 release. Their browser has always looked like crap compared to most others. Well maybe not Lynx.</editorial>

But I guess the issue is still there – what if some users choose to keep their zoom at < 100%? What’s the workaround?
http://none Rafael

Excellent work! I implemented on my intranet.
It would be great if you could validate ALL your forms with one javascript by creating classes to be included in the form.
Keep up the good work!!!!
rahees

hi
this is very nice
but i want to more fields how can add more field plzzzzzzz
http://digital-visualz.com Erick

Just wanted to add a couple regex for everyone above.

You can also find almost anything you need at: http://regexlib.com/

But here is a phone number one that I found worked great:

var phoneRegex = /^(?:$[2-9]\d{2}$\ ?|[2-9]\d{2}(?:\-?|\ ?))[2-9]\d{2}[- ]?\d{4}$/;

And a zip code:

var zipRegex = /^\d{5}(-\d{4})?$/;

Like i said though check the site above for almost anything you could need

Great script!! thanks a lot

You can see my example at http://sunrisecoal.com/apply.php
http://www.karinamyers.com Karina

Thank you!! I implemented it in my website, thank you so much for this nice and clean script. I’d like to add the 2 password fields validation in it (to see if the text entered in password field and re-type password field are the same). Any suggestions?
Again, thank you! keep up the good work.
facebook

Thank you very much.. It works awesome… With few changes in original javascript, you script can do a magic
Josh

I used your script in my form and it works fine. However, I have one questions instead of showing inlineMsg one by one can we show all at one. Like: Please select name, address, city all at one. Please do let me know how to do that.
Claire

Having problems with Select (dropdown) fields in IE7 – works fine in FF, but just ignores dropdowns in IE.
Pingback: JavaScript Validation « Pixelerium
lien

how would i require a certain length in my field?
i tried var pcRegex = /^[0-9]{8}$/;
but that doesn’t work.
http://www.fastie.com Will Fastie

Very, very nice. I just added it to a site I have under development for a client and like it better than any other client-side validation technique I have seen.

If you establish a donation mechanism, I will have my commercial clients make a donation. In the meantime, I’ve given credit on the site and created a link back to this article.

Many thanks.

Will Fastie
Baltimore, MD
Jamin

the script is great. I got it working and everything is great just one small problem im using the script on a form that is inside a lightbox which works well. my lightbox script requires that any script that needs to get loaded in the lightbox needs to be called in the page that links to the lightbox so on my index page i have two links to lightbox forms login and register which means that on my index page is the include for messages.js which works great for my login link but i made a messages2.js script for the register link once i write the include in my index page the login links register form validates but the login form stops validating

Basically i wanna know how to use one messages.js script to validate two different forms is that possible? Thank you.
http://kuba-walkowiak.pl kuba

Hi,
I have a problem, they set I can’t message went to my e-mail
walter

This looks like a great script. Does the script also validate radio button groups?

greetz,
walter
http://www.flordomonte.com nuno

hello anybody can tel-me or mrs michael where i have to chence the file to send the email to the place were i want- suppose i wanna send after all fields complete to my “e-mail.com” and at the moment i cant working with this wonderfull script
tks
vishal

How can i work for dynamic form like form1, form2, but the filed name is same. how to do i implement
Zia

This script is great ! How do I get it to show a success message without going to a new page?
acctman

is it possible to use this code with multiple forums on a page?
acctman

ok i figured it out. in order to use multiple forms you have to use different “function” name function email(form) and function validate(form) and then change onsubmit=”return email(this) and onsubmit=”return validate(this)
ultrasound

Hi – Great Script!

Anyway of having the message pop-up to the left of the field vs. the right? I think it would be a good idea to have functions for lefPosition, rightPosition & topPosition for your script, this way it can be useful to users who have forms all the way to the left of the screen etc
http://www.snutt.net Stark-Johan

ultrasound – Just use the variable MSGOFFSET to move the point of display horisontally. It’s easy to add a vertical MSGOFFSET variable too. Compare line 73 & 74 in the code and append an offset variable to the variable topposition just like in the line declaring leftposition.

To put it in plain english:
/**
* Step 1
*/

Find line 45:
————-
var MSGOFFSET = 3;

Replace with:
————-
var MSGOFFSET_H = 3;
var MSGOFFSET_V = 3;

/**
* Step 2
*/

Find line 73 & 74:
——————
var topposition = topPosition(targetdiv) – ((msgheight – targetheight) / 2);
var leftposition = leftPosition(targetdiv) + targetwidth + MSGOFFSET;

Replace with:
————-
var topposition = topPosition(targetdiv) – ((msgheight – targetheight) / 2) + MSGOFFSET_V;
var leftposition = leftPosition(targetdiv) + targetwidth + MSGOFFSET_H;

Now you should be able to fine adjust the V and H position.

Requiring checked checkboxes is easy too. (e.g. to accept terms and agreements) Use Ricos snippets above for radio buttons and call this function instead:
// Function to require checkbox
function checkB(box) {
if (box.checked) return box.value;
else return null;
}

I wanted to have different offsets for different input types (e.g. text and radio buttons) so I added an if statement to the offset lines and added two offset variables just like above:
var BTN_MSGOFFSET_H = 3;
var BTN_MSGOFFSET_V = -22;

var buttonRegex = /^btn_[a-wA-W0-9_]+$/;
if(target.match(buttonRegex)) {
var topposition = topPosition(targetdiv) – ((msgheight – targetheight) / 2) + BTN_MSGOFFSET_V;
var leftposition = leftPosition(targetdiv) + targetwidth + BTN_MSGOFFSET_H;
} else {
var topposition = topPosition(targetdiv) – ((msgheight – targetheight) / 2) + MSGOFFSET_V;
var leftposition = leftPosition(targetdiv) + targetwidth + MSGOFFSET_H;
}

This uses the BTN-offset to all targets that has names starting with ‘btn_’.

Full code using radio buttons, required checkbox, H&V offstets and field specific offsets can be seen here: http://www.snutt.net/testzon/mixed/messages.js
http://www.blissbootcamp.com Alan

Very nice stuff, thanks so much for spending your time and skillz to help the rest of us. Works like a charm.
http://www.ananyainnov.com George Kottackakathu

Hai,

I have used this script and comes out good and the feel is good.

I would like to know how we can include the radio buttons and check boxex to be validated.

I have tried my bit in vain.

Seeking help in this regard.

Thanking you

Best Regards
George Kottackakathu
+919944904304
modo

Hi, and if i need check word size ? Larger than 4 letters for example … ?
acctman

i have a form that requires the name= to be formated like add['user'] and add['pass'] (ex: name=add['user']) how can i pass that for validation?
le thuy

Why i can’t apply your code into dynamic web. For exam when i apply for a form “”register new user”" for my web.
http://srmc.phcs.us Harry

Hi,

How do we do for Checkbox ? I have 2 checkbox basically "Yes" or "No" and user shold select either one of them. How can I hightlight if the user doesn't select any of them.
Harry
Imran

Hi,

how can i validate the form entry against a mysql database?

my form has a autosuggest list from a mysql table, but users can type what they want.

I want to take whatever has been typed and check it against mysql db and display the inlinemsg if its not in the db

Many Thanks

Imran

basically what to check i
http://arkeh.com Rich

I too love the look of this validation, but also need to validate a checkbox to make sure it's sleected and not left empty, doesn;t seem to work, anyone figure out how to get a checkbox to validate with this?
Anil

Hi Michael,

The code is awesome, but have a problem. when there is a textbox and a dropdown next to each other the validation pop up doesnt display. I mean when the text box is empty and the user submits the button then the error messege is being display in the background of the dropdown . It would be great if you help me out.
thanks
Anil
Pingback: Web Form Validation: Best Practices and Tutorials | How-To | Smashing Magazine
http://www.leigeber.com Michael

Comments are now closed. New version almost ready for release.
Pingback: Web Form Validation: Best Practices and Tutorials | Desinine
Pingback: Web Form Validation: Best Practices and Tutorials « Ramesh
Pingback: Web Form Validation: Best Practices and Tutorials | Results videos photos news blogs At I google wiki . com
Pingback: Web Form Validation: Best Practices and Tutorials — missrix
Pingback: Fun with JavaScript: Form Validation « inspiration
Pingback: Six Digit Media | Web Form Validation: Best Practices and Tutorials | Cincinnati's Premier Web Design and Development Company - We are the Bottom Line in Online Marketing
Pingback: 16+ Top JavaScript/Ajax Effects for Modern Web Design | DevWebPro
Pingback: Web Form Validation: Best Practices and Tutorials | WebsGeek
Pingback: Geek is a Lift-Style. » Web Form Validation: Best Practices and Tutorials
Pingback: Formularvalidierung in Echtzeit für zufrieden User | grafixx.at
Anonym

Very Gud Thanxxx
Anonym

Very Gud Thanxxx
Amol2285

thanks this is so nice
Dfgdf

beautiful script… thank you sooo much
http://www.facebook.com/jrochelly Jakson Rochelly

Great!!
25dec2011

Dear Jamin
hw i will do in ascs page?
what parameter i passed there?
when i call ascs page on aspx page it will noy work.
thanks for article .
please solvr this prob also

ashu
25dec2011@gmail.com
Pradeepkasta

good
Quý Ngô Văn

very good !
Ravi kumar M

instead of dynamic validation can we do in simple way i.e., with out using
inlinemsg()
Kathy

amazing! thank you!
http://www.facebook.com/people/Sean-Cowan/1666950044 Sean Cowan

Great script, thanks a lot for sharing. I have a background in .PHP so while I can get the jest of what's written in java scripts the syntax is still a little cluttered for me. This is the exact script I was looking for, a pop-up function I can pass info to. Again thanks!
http://www.facebook.com/people/Sean-Cowan/1666950044 Sean Cowan

That is the simple way. Doing per-item validation with self-contained scripts would be more tedious. If you do not want to work with an external .JS file then just declare <script></script> in the head of your HTML or PHP form file and put the inlinemsg() in there. Then on each item you want do <script>if statement here</script>. Not sure why you would find that easier, but that is how it would be done if you prefer a single file.
http://twitter.com/devGOD Patrick

is the new version available?
Mehmet KUL

<a href="http://www.hanimokey.com">Firefox</a> don't work. Please help.
Prasanthppm

Better use a radio button rather than checkbox, if only 2 choices are there: ie. only 'yes' and 'no' is there.