Dynamic JavaScript Form Validation

Excellent work – very useful.
Many thanks

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

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.

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

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.

@Michael – As I said: “Seems clean and well done. Thanks for the script!” and now thanks for the fix

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

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

Do I need to apply my own processor?

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

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!

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

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.

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

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?

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

thanks

TJ

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;

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!

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

//d

“You have entered an invalid name” – Simon Bérubé

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?

Nice code. Using it.

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!

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!

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

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!

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…

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!

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.

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…

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

Simple, light and efficient.
Thanks

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!

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 .

grrr….it’s not showing proper text…
i- should be i minus minus

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?

hi
this is very nice
but i want to more fields how can add more field plzzzzzzz

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.

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.

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

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.

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

greetz,
walter

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

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

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

Very nice stuff, thanks so much for spending your time and skillz to help the rest of us. Works like a charm.

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

Why i can’t apply your code into dynamic web. For exam when i apply for a form “”register new user”" for my web.

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

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