DHTML Form Validation


Try this form out! When you type in your text and move to the next field the form will determine whether the data is correct or not. If it is, a checkbox appears beside the text! Very cool.

	First name:
	Last name:
	E-mail address:
	Birthday (mm/dd/yyyy):

Author: Chris van Marle

Paste this code in your HEAD tags:
<SCRIPT LANGUAGE="JavaScript"> // By Chris van Marle (C.A.vanMarle@inter.NL.net - http://www.chrisworld.org) <!-- Begin FormName = "form" CheckName = "check" TextName = "text" var Condition=new Array( 'a!=""', // simple validation (must be filled) 'a!=""', // simple validation (must be filled) 'a!=""&&a.length>5&&a.indexOf("@")!=-1&&a.indexOf(".")!=-1', // validation for email address 'a.length>7&&!(a.split("/")[0]*1>12)&&!(a.split("/")[1]*1>31)&&!(a.split("/")[2]*1<1900)' // validation for date ); function docheck(w) { eval("a=document." + FormName + "." + TextName + w + ".value"); if (eval(Condition[w])) eval("document." + FormName + "." + CheckName + w + ".checked=true"); else eval("document." + FormName + "." + CheckName + w + ".checked=false"); } // End --> </script>

Paste this code in your BODY tags:
<form name=form> <table> <tr> <td><input type=checkbox name=check0 onClick="return false"></td> <td>First name:</td> <td><input type=text name=text0 onBlur='docheck("0")'></td> </tr> <tr> <td><input type=checkbox name=check1 onClick="return false"></td> <td>Last name:</td> <td><input type=text name=text1 onBlur='docheck("1")'></td> </tr> <td><input type=checkbox name=check2 onClick="return false"></td> <td>E-mail address:</td> <td><input type=text name=text2 onBlur='docheck("2")'></td> </tr> <td><input type=checkbox name=check3 onClick="return false"></td> <td>Birthday (mm/dd/yyyy):</td> <td><input type=text name=text3 onBlur='docheck("3")'></td> </tr> </table> </form>

Tons of free articles and information about your health, pediatrics, and living a healthy lifestyle.