Validate an HTML Form, including EMail Address
I can't really explain Javascript in this page, but I thought I'd send some existing code that I have in the hopes that it might be of help to some others.
Here is a sample of an HTML Form for a basic user profile. Note the "name" and the "onsubmit" in the <form> tag.
<form method="post" name="f_profile" action="default.asp" onsubmit="return validate_profile(this);">
<table align="center" border="0">
<tr>
<td align="center">
<b>Items marked with * are required</b>
</td>
</tr>
<tr>
<td>
<table border="0" align="center">
<tr>
<td valign="top">First Name</td>
<td valign="top">*</td>
<td valign="top">
<input type="text" name="fn_up_namefirst" value="Thomas" size="24" maxlength="20" />
</td>
</tr>
<tr>
<td valign="top">Last Name</td>
<td valign="top">*</td>
<td valign="top">
<input type="text" name="fn_up_namelast" value="" size="24" maxlength="20" />
</td>
</tr>
<tr>
<td valign="top">Address 1</td>
<td valign="top"> </td>
<td valign="top">
<input type="text" name="fn_up_addr1" value="6050 Peachtree Pkwy, #240-200" size="30" maxlength="40" />
</td>
</tr>
<tr>
<td valign="top">Address 2</td>
<td valign="top"> </td>
<td valign="top">
<input type="text" name="fn_up_addr2" value="" size="30" maxlength="40" />
</td>
</tr>
<tr>
<td valign="top">Address 3</td>
<td valign="top"> </td>
<td valign="top">
<input type="text" name="fn_up_addr3" value="" size="30" maxlength="40" />
</td>
</tr>
<tr>
<td valign="top">City</td>
<td valign="top"> </td>
<td valign="top">
<input type="text" name="fn_up_city" value="Norcross" size="30" maxlength="25" />
</td>
</tr>
<tr>
<td valign="top">State</td>
<td valign="top"> </td>
<td valign="top">
<select name="fn_up_state">
<option value = -->- Choose -</option>
<option value = AL>Alabama</option>
<option value = AK>Alaska</option>
<option value = AZ>Arizona</option>
<option value = AR>Arkansas</option>
<option value = CA>California</option>
<option value = CO>Colorado</option>
<option value = CT>Connecticut</option>
<option value = DE>Delaware</option>
<option value = FL>Florida</option>
<option value = GA selected>Georgia</option>
<option value = HI>Hawaii</option>
<option value = ID>Idaho</option>
<option value = IL>Illinois</option>
<option value = IN>Indiana</option>
<option value = IA>Iowa</option>
<option value = KS>Kansas</option>
<option value = KY>Kentucky</option>
<option value = LA>Louisiana</option>
<option value = ME>Maine</option>
<option value = MD>Maryland</option>
<option value = MA>Massachusetts</option>
<option value = MI>Michigan</option>
<option value = MN>Minnesota</option>
<option value = MS>Mississippi</option>
<option value = MO>Missouri</option>
<option value = MT>Montana</option>
<option value = NE>Nebraska</option>
<option value = NV>Nevada</option>
<option value = NH>New Hampshire</option>
<option value = NJ>New Jersey</option>
<option value = NM>New Mexico</option>
<option value = NY>New York</option>
<option value = NC>North Carolina</option>
<option value = ND>North Dakota</option>
<option value = OH>Ohio</option>
<option value = OK>Oklahoma</option>
<option value = OR>Oregon</option>
<option value = PA>Pennsylvania</option>
<option value = RI>Rhode Island</option>
<option value = SC>South Carolina</option>
<option value = SD>South Dakota</option>
<option value = TN>Tennessee</option>
<option value = TX>Texas</option>
<option value = UT>Utah</option>
<option value = VT>Vermont</option>
<option value = VA>Virginia</option>
<option value = WA>Washington</option>
<option value = DC>Washington D.C.</option>
<option value = WV>West Virginia</option>
<option value = WI>Wisconsin</option>
<option value = WY>Wyoming</option>
<option value = XX>Not in U.S.</option>
</select>
</td>
</tr>
<tr>
<td valign="top">Birth (MM)</td>
<td valign="top">*</td>
<td valign="top">
<select name="fn_up_birthM">
<option value = 1>1</option>
<option value = 2>2</option>
<option value = 3 selected>3</option>
<option value = 4>4</option>
<option value = 5>5</option>
<option value = 6>6</option>
<option value = 7>7</option>
<option value = 8>8</option>
<option value = 9>9</option>
<option value = 10>10</option>
<option value = 11>11</option>
<option value = 12>12</option>
</select>
</td>
</tr>
<tr>
<td valign="top">E-Mail Address</td>
<td valign="top">*</td>
<td valign="top">
<input type="text" name="fn_up_email" value="test49@thomasmartin.com" size="30" maxlength="100" />
</td>
</tr>
<tr>
<td align="center">
<input type="hidden" name="currPIN" value="999999999949" />
<input type="hidden" name="currSID" value="200602191339337320978" />
<input type="hidden" name="actpin" value="" />
<input type="hidden" name="nextscreen" value="scr5086" />
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="cancel" value="Cancel" onclick="history.go(-1)" />
</td>
</tr>
</table>
</form>
Here is the Javascript to validate that form. PLEASE NOTE that there a few extra fields in the javascript validation which I removed from the form -- because they were just too large to include on this page.
function validate_profile() {
var strMsg = "The following fields need attention: \n" ;
var strMsg2 = "" ;
var blnShow = false ;
var theNowDate = new Date() ;
var theNowYear = theNowDate.getYear() ;
var theNowMonth = theNowDate.getMonth() ;
// for netscape 7 and other browsers?
// ie returns getYear as 4 digits (ie 2004)
// ns7 returns getYear as from 1900 (ie 104)
if (theNowYear < 1900) {
theNowYear += 1900 ;
}
var strField = ltrim(document.f_profile.fn_up_namefirst.value) ;
if (strField=="") {
strMsg += "\nFirst Name (or initial) is required" ;
blnShow = true ;
}
var strField = ltrim(document.f_profile.fn_up_namelast.value) ;
if (strField=="") {
strMsg += "\nLast Name is required" ;
blnShow = true ;
}
var strField = ltrim(document.f_profile.fn_up_zipcode.value) ;
if (strField=="") {
strMsg += "\nZip/Postal Code is required" ;
blnShow = true ;
}
if (strField.length < 5) {
strMsg += "\nZip/Postal Code needs 5+ digits" ;
blnShow = true ;
}
var strField = ltrim(document.f_profile.fn_up_country.value) ;
if (strField=="--") {
strMsg += "\nCountry choice is required" ;
blnShow = true ;
}
var strField = ltrim(document.f_profile.fn_up_gender.value) ;
if (strField=="") {
strMsg += "\nGender choice is required" ;
blnShow = true ;
}
var strField = ltrim(document.f_profile.fn_up_birthY.value) ;
if (strField=="") {
// old, for text field
strMsg += "\nBirth (YYYY) is required" ;
blnShow = true ;
}
var intYear = parseInt(strField) ;
if (intYear <= 1900 || intYear >= theNowYear) {
strMsg2 += "\nBirth (YYYY) must be between 1900 and " + theNowYear ;
blnShow = true ;
}
if (intYear == (theNowYear - 1)) {
strMsg2 += "\n You need to select your Birth (YYYY) Value" ;
blnShow = true ;
}
var strField = ltrim(document.f_profile.fn_up_birthM.value) ;
if (strField=="") {
strMsg += "\nBirth (MM) is required" ;
blnShow = true ;
}
var intMonth = parseInt(strField) ;
if (intMonth < 1 || intMonth > 12) {
strMsg2 += "\nBirth (MM) must be between 1 and 12" ;
blnShow = true ;
}
var strField = ltrim(document.f_profile.fn_up_email.value) ;
if (strField=="") {
strMsg += "\nEmail Address is required" ;
blnShow = true ;
}
else {
if (!isValidEmail(strField)) {
strMsg2 += "\nEmail Address (not valid)" ;
blnShow = true ;
}
}
// checking for 13 years of age!
var datBirth = new Date(intYear,intMonth-1,1) ;
var datCompare = new Date()
datCompare.setYear(theNowDate.getYear() - 13)
if (intYear != theNowYear - 1 && datBirth > datCompare) {
strMsg = "" ;
strMsg2 = "\nOur Terms of Service prohibit" ;
strMsg2 += "\nuse of xyz.com by persons" ;
strMsg2 += "\nunder the age of 13." ;
// strMsg2 += "\nToday: " + theNowDate.toLocaleString() ;
// strMsg2 += "\n-13yrs: " + datCompare.toLocaleString() ;
// strMsg2 += "\nBDay:" + datBirth.toLocaleString() ;
// strMsg2 += "\nEntered Year:" + intYear ;
// strMsg2 += "\nEntered Month:" + intMonth ;
blnShow = true ;
}
if (blnShow==true) {
alert(strMsg + "\n" + strMsg2) ;
return false ;
}
return true ;
}
Finally, here is the Javascript for validating the email address.
function isValidEmail(emailAddress) {
var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ ;
return re.test(emailAddress) ;
}
Things to note:
In the <form> tag, the "name" is "f_profile" -- which is something that you see quite a bit in the Javascript validation.
Also in the <form> tag, there is an onsubmit="return validate_profile(this);" which is actually what causes the validation to happen locally, on the client browser.
Javascript needs to be included on the web page, either as text OR as a linked in page like this: <script language="javascript" type="text/javascript" src="./xyz_javascrip.js"></script>
Hope this helps someone else.
Disclaimer: Must of this "code" was taken from other web pages and/or some javascript source code libraries offered on the web.
There is one comment on this page. [Display comment]