<HTML>
<HEAD>
<TITLE> Form Validation Example </TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function validatePersonalInfo(){
var _first = document.info.fname.value;
var _last = document.info.lname.value;
var _street = document.info.street.value;
var _city = document.info.city.value;
var _zip = document.info.zip.value;
var _phone = document.info.phone.value;
var _email = document.info.email.value;
if(_first.toString() == ""){alert("Please enter a first name.");}
if(_last.toString() == ""){alert("Please enter a last name.");}
if(_street.toString() == ""){alert("Please enter your street name.");}
if(_city.toString() == ""){alert("Please enter your city.");}
if(_zip.toString() == ""){alert("Please enter your zip.");}
if(_phone.toString() == ""){alert("Please enter your phone number.");}
if(_email.toString() == ""){alert("Please enter your email.");}
var checkZip = checkNum(5);
var phoneInput = document.info.phone.value;
var validPhone = false;
var validZip = false;
if(checkZip == true){
validZip = true;
}
else{
alert("Invalid Zip Code" + validZip);
}
if(!checkPhone(phoneInput)){
alert("Phone number is invalid." + validPhone);
}
else{
validPhone = true;
}
if(validZip && validPhone){
alert("Your form has been verified");
}
}
// Strips hyphens out of phone number and verifies that
// phone number is valid. Any phone number in the format
// xxxxxxxxxx, xxx-xxx-xxxx, or (xxx)xxx-xxxx will be valid
function checkPhone(str){
var regexp = /^(\d{10}|\d{3}-\d{3}-\d{4}|\(\d{3}\)\d{3}-\d{4})$/;
return regexp.test(str);
}
function checkNum(length){
var zipEntry = document.info.zip.value;
var zipNum = parseInt(zipEntry, 10);
if (document.info.zip.value.length == length){
if(zipNum != 0 && isNaN(zipNum) == false){
return true;
}
else {
return false;
}
}
else {
return false;
}
}
// End hide-->
</SCRIPT>
</HEAD>
<BODY>
<P>
<CENTER><B>Form Validation Example</B></CENTER>
<B>Personal Information:</B>
<FORM NAME="info" ACTION="" METHOD="post">
<TABLE>
<TR><TD ALIGN="left">First Name:</TD>
<TD ALIGN="left">
<INPUT TYPE="text" NAME="fname" SIZE=15>
Last Name:
<INPUT TYPE="text" NAME="lname" SIZE=20>
</TD>
</TR>
<BR>
<TR><TD ALIGN="left">Street:</TD>
<TD ALIGN="left">
<INPUT TYPE="text" NAME="street" SIZE=30></TD>
</TR>
<BR>
<TR>
<TD ALIGN="left">City:</TD>
<TD ALIGN="left">
<INPUT TYPE="text" NAME="city" SIZE=15>
State:
<SELECT NAME="state">
<OPTION value=AL>AL
<OPTION value=AK>AK
<OPTION value=AZ>AZ
<OPTION value=AR>AR
<OPTION value=CA>CA
<OPTION value=CO>CO
<OPTION value=CT>CT
<OPTION value=DE>DE
<OPTION value=FL>FL
<OPTION value=GA>GA
<OPTION value=HI>HI
<OPTION value=ID>ID
<OPTION value=IL>IL
<OPTION value=IN>IN
<OPTION value=IA>IA
<OPTION value=KS>KS
<OPTION value=KY>KY
<OPTION value=LA>LA
<OPTION value=ME>ME
<OPTION value=MD>MD
<OPTION value=MA>MA
<OPTION value=MI>MI
<OPTION value=MN>MN
</SELECT>
Zip:
<INPUT TYPE="text" NAME="zip" SIZE=7>
</TD>
</TR>
<BR>
<TR><TD ALIGN="left">Phone (w/area code):</TD>
<TD ALIGN="left">
<INPUT TYPE="text" NAME="phone" SIZE=20></TD>
</TR>
<BR>
<TR><TD ALIGN="left">Email:</TD>
<TD ALIGN="left">
<INPUT TYPE="text" NAME="email" SIZE=20></TD>
</TR>
<BR>
</TABLE>
<CENTER>
<INPUT TYPE="button" VALUE="Submit" onclick="validatePersonalInfo()">
</CENTER>
</FORM>
</BODY>
</HTML>
| 10.27.Form Validation |
| 10.27.1. | Using a Form for Client-Side Validation |