Form Validation
Javascript Validation
<script language="Javascript" type="text/javascript">
<!--
function validator()
{
//First we check for errors.
var flag = 0;
var errors = "";
if (document.frm.name.value=="") { //If a name is not specified, show an error
flag++;
errors = errors + "Name\n";
}
//Show error if age is not a number or if is not between 5 and 100
var age = document.frm.age.value
if (age < 5 || age > 100 || !age.match("^[0-9]+$") ) {
flag++;
errors = errors + "Age\n";
}
//Check if email is a valid E-mail id.
var id = document.frm.email.value
var re = /^.+\@.+\..{2,4}$/gi; //The regular expression for a valid email address
if(!id.match(re)) { //If it is NOT a match
flag++;
errors = errors + "E-Mail\n";
}
//Dispay an error message if there was any error
if(flag > 0) {
alert("Errors were found in these elements.\n"+errors+"\nPlease re-enter these elements.")
return 0; //Exit the function if error is there
}
//Show the results
var data = "Personal Details\n----------------\nName : "+document.frm.name.value +
"\nAge : "+age + "\nOccupation : "+document.frm.job.value + "\nE-Mail : " + id
if (document.frm.sex[0].checked) data = data + "\nGender : Male"
else data = data + "\nGender : Female"
var langs = ""
if(document.frm.html.checked) langs = langs + "HTML, "
if(document.frm.javascript.checked) langs = langs + "JavaScript, "
if(document.frm.english.checked) langs = langs + "English, "
if(document.frm.perl.checked) langs = langs + "Perl, "
if(document.frm.monkey.checked) langs = langs + "Monkey Talk."
if (langs != "") data = data + "\n\n"+ document.frm.name.value +" knows the following languages...\n" + langs
document.frm.result.value = data
return true;
}
//-->
</script>
</head>
<body>
<form name="frm" onsubmit="return validator();">
<div>
<table>
<tr>
<td>
<strong>Name</strong> *</td>
<td>
<input name="name" type="text" value="" /></td>
</tr>
<tr>
<td>
<strong>Age</strong> *</td>
<td>
<input name="age" type="text" value="" maxlength="3" size="3" /></td>
</tr>
<tr>
<td>
<strong>Occupation</strong></td>
<td>
<select name="job">
<option value="Student">Student</option>
<option value="Teacher">Teacher</option>
<option value="Clerk">Clerk</option>
<option value="Telephone Sanitizer">Telephone Sanitizer</option>
<option value="Business Man">Business Man</option>
<option value="Militry Personal">Military Personal</option>
<option value="Computer Expert">Computer Expert</option>
<option value="Others" selected="selected">Others</option>
</select>
</td>
</tr>
<tr>
<td>
<strong>E-Mail Address</strong> *</td>
<td>
<input name="email" type="text" value="" /></td>
</tr>
<tr>
<td>
<strong>Sex</strong> *</td>
<td>
Male
<input type="radio" name="sex" value="Male" checked="checked" />
| Female
<input type="radio" name="sex" value="Female" /></td>
</tr>
<tr>
<td valign="top">
<strong>Known Languages</strong></td>
<td>
<input type="checkbox" name="html" />
HTML<br />
<input type="checkbox" name="javascript" />
JavaScript<br />
<input type="checkbox" name="english" checked="checked" />
English<br />
<input type="checkbox" name="perl" />
Perl<br />
<input type="checkbox" name="monkey" />
Monkey Speak<br />
</td>
</tr>
<tr>
<td>
<input type="button" value="Submit" onclick="return validator();" /></td>
<td>
<input type="reset" value="Clear" /></td>
</tr>
</table>
<br />
<br />
<strong>Results</strong><br />
<textarea name="result" rows="10" cols="70"></textarea>
</div>
</form>
</body>
</html>
