CMPS 335 Advanced Web Publishing
JavaScript Programming
Validating Form Data with JavaScript
:
<script language=JavaScript>
function validate(form1) {
// Make sure that the name field and the password field are not blank
if (form1.name.value.length < 1 ) {
window.alert("Please enter your name")
form1.name.focus();
return false;
}
if (form1.password1.value == "") {
window.alert("You must enter a password")
form1.password1.focus();
return false;
}
// Make sure the passwords entered are identical
if (form1.password1.value !=form1.password2.value) {
window.alert("Entered passwords did not match");
form1.password1.focus(); // Moves the input focus
form1.password1.select(); // Highlights the input area
return false;
}
// If an email address is required, include the following
// statements to verify the syntax of the email address
emailAddress = form1.email.value;
if (form1.email.value == "") {
window.alert("Please enter your email address.");
return false;
}
// Make sure the email address does not contain any of the following
// invalid characters: space, slash, colon, comma, and semicolon
invalidChars = " /:,;";
for (i=0; i<invalidChars.length; i++) {
badChar = invalidChars.charAt(i);
if (form1.email.value.indexOf(badChar, 0) > -1) {
window.alert("Invalid characters: " + badChar);
return false;
}
}
// Make sure there is an @ symbol in the email address
atPos = form1.email.value.indexOf("@",1);
if (atPos == -1) {
window.alert("There must be one @ symbol in the email address");
return false;
}
// Make sure there is no more than one @ symbol
if (form1.email.value.indexOf("@", atPos+1) != -1) {
window.alert("You have more than one @ symbol in the email address");
return false;
}
// Make sure there is a period (.) after the @ symbol
periodPos = form1.email.value.indexOf(".", atPos);
if (periodPos == -1) {
window.alert("There is no period after the @ symbol");
return false;
}
// Make sure one of the radio buttons is selected
radioOption = -1;
for (i=0; i < form1.gender.length; i++) {
if (form1.gender[i].checked) {
radioOption = i;
}
}
if (radioOption == -1) {
window.alert("You must click male or female radio button");
return false;
}
// Make sure one of the drop-down menu items is selected
menuOption = form1.agegroup.selectedIndex;
if (form1.agegroup.options[menuOption].value == "") {
window.alert("You must select drop-down menu item");
return false;
}
// Submit the form data to the Web server
return true;
}
// location.href="cgi-bin/as8EmailFormData.cgi"; statement
// may be used instead of the "return true;" statement
</script>
</head>
<body>
<br> Validating Form Data (Emailing Form Data)
<br><br><center>
:
:
<form name="form1" action="cgi-bin/as8EmailFormData.cgi" method="POST"
onSubmit="return validate(form1)">
Your Name: <input type="text" name="name">
<br>Your Password: <input type="password" name="password1" size=15>
<br>Verify Password: <input type="password" name="password2" size=15>
<br>Email Address: <input type="text" name="email" size=18>
<br> Gender: <input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="female">Female
<br>Your Age ... <select name="agegroup">
<option value="" selected>Select an age group
<option value="under20">under 20
:
</select>
.
.
</form></center>
<script language="JavaScript">
document.form1.name.focus();
</script>
: