Dynamic JavaScript Form Validation

Design, Javascript 164 responses so far

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.

The following two tabs change content below.
Scriptiny is a web development blog featuring fresh articles on JavaScript, AJAX, CSS, XHTML, PHP, Photoshop and more.

Latest posts by Michael (see all)

  • 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&gt; 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.

  • Daz

    I'm pretty new to JavaScript, with the inline messages how do I get them to display against 3 radio buttons (if one is not checked). At the moment it just highlights and displays the message next to the first one in the group, rather than them all.

    Also if I have a condition on 3 fields (e.g. one must be entered) how do I display a message next to them all and not just one of the 3 fields?

    I guess my questions are all to do with multiple fields.

    Thanks Heaps

  • aw

    how do i add the option to send an email with all the information collected by this form? Thx!!

  • PS

    Hi! Anyone know how do i add succes message when submit?

  • lauraine 2012

    I have no words for this great post such a awe-some information i got gathered. Thanks to Author.
    <a href=http://viperwolfplayer.com> html5 video player</a>|<a href=http://seotoolster.com/seotoolster/html5-player/html5-video-player-audio-player/> html5 player</a>
     

  • Vanita341

    Huuuuu i am really sorry i did't understand this concept actually i am searching for pincode validation in this contest i did't get that info. can any one help me?

  • Indy

    You'll need some PHP, look up a login system Tutorial

  • Ra9449320867

    hkhkhkhkh

  • Cngerra

    Awesome script..keep it up..

  • Striker

    its really usefull stuff… Thanks buddy.

  • Singhrajveer88

    Very nice script..thank you very much..i was luking for this kind of scripts..

  • Pirashkee

    Nice job!

  • Budau Daniel

    Hi, the script is very good, I use in http://www.atomstudio.ro
    I make litle change but is great.
    Many thanks.

  • maxspenc3

    this is excelent project.

  • Deep

    Greate Script Dude ….

  • anson

    fucking allllllllllllllll

  • anson

    sucking scripttttt

  • disha

    it is helpful.. Good work.. .absolutely fantastic..

  • Bilal Ahmad

    Can any one plase tell me that is any JS file need to be embed in order to use the above mentioned function (
    inlineMsg('name','You must enter your name.',2);
    ).

  • rehana patel

    very useful

x
Loading...