INTRODUCTION
There are many ways to validate a form using JavaScript. Dreamweaver has some built-in routines, but I find them a little inflexible, and awkward to modify.The following example uses a method that allows the list of form errors to accumulate, and display all-at-once in a single alert box.
Note: Throughout the script you'll notice I've used "\n" quite a lot. Those two characters (called escape characters) together tell JavaScript to create a new line in the alert box.
HOW IT WORKS
1. The first variable we create is for the title of the alert -- you can change this to suit your needs. We also use this to check if any errors were added later.
var theMessage = "Please complete the following: \n-----------------------------------\n"
2. Create a second variable to remember the first variable without errors.
var noErrors = theMessage
3. Next we check our first field. In this case we check to see if it's empty. If it has been left blank, add a line to the error message telling the user to type their name.
theMessage = theMessage + "\n --> Your name"
But if the field was filled in, we skip adding anything to the error message, and move onto the next field, and so on, and so on.
When we've checked all fields, we check the state of our error message. If nothing has been added to it, the form will be submitted, and no errors will be shown. But if the error message has changed from the beginning of the script, then block submission, and show the error alert.
THE JAVASCRIPT
This would go inthe <HEAD> section of the page.
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function validate() {
var theMessage = "Please complete the following: \n-----------------------------------\n";
var noErrors = theMessage
// make sure field is not blank
if (document.form1.name.value=="") {
theMessage = theMessage + "\n --> Your name";
}
// validate an e-mail address
if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,4})+$/.test(document.form1.email.value)){
theMessage = theMessage + "\n --> Enter a valid e-mail address";
}
// Make sure entry is a certain length
var lengthCheck = document.form1.code.value
if (lengthCheck.length < 4) {
theMessage = theMessage + "\n --> Enter 4 character code";
}
// make sure a radio button is selected
var radioCheck = false;
for (i = 0; i < document.form1.gender.length; i++) {
if (document.form1.gender[i].checked)
radioCheck = true; }
if (!radioCheck) {
theMessage = theMessage + "\n --> Choose your gender";
}
// Make sure at least 1 checkbox is checked
var multiCheckbox = false;
for (i = 0; i < document.form1.session.length; i++) {
if (document.form1.session[i].checked)
multiCheckbox = true; }
if (!multiCheckbox) {
theMessage = theMessage + "\n --> Choose which session(s)";
}
// Make sure a selection list is used
var listCheck = document.form1.location.selectedIndex;
if (document.form1.location.options[listCheck].value=="none") {
theMessage = theMessage + "\n --> Choose a location";
}
// Make sure a single checkbox is checked
var boxCheck = false;
if (document.form1.confirm.checked) {
boxCheck = true; }
if (!boxCheck) {
theMessage = theMessage + "\n --> Agree to the terms";
}
// If no errors, submit the form
if (theMessage == noErrors) {
return true;
} else {
// If errors were found, show alert message
alert(theMessage);
return false;
}
}
// End -->
</script>
<!-- Begin
function validate() {
var theMessage = "Please complete the following: \n-----------------------------------\n";
var noErrors = theMessage
// make sure field is not blank
if (document.form1.name.value=="") {
theMessage = theMessage + "\n --> Your name";
}
// validate an e-mail address
if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,4})+$/.test(document.form1.email.value)){
theMessage = theMessage + "\n --> Enter a valid e-mail address";
}
// Make sure entry is a certain length
var lengthCheck = document.form1.code.value
if (lengthCheck.length < 4) {
theMessage = theMessage + "\n --> Enter 4 character code";
}
// make sure a radio button is selected
var radioCheck = false;
for (i = 0; i < document.form1.gender.length; i++) {
if (document.form1.gender[i].checked)
radioCheck = true; }
if (!radioCheck) {
theMessage = theMessage + "\n --> Choose your gender";
}
// Make sure at least 1 checkbox is checked
var multiCheckbox = false;
for (i = 0; i < document.form1.session.length; i++) {
if (document.form1.session[i].checked)
multiCheckbox = true; }
if (!multiCheckbox) {
theMessage = theMessage + "\n --> Choose which session(s)";
}
// Make sure a selection list is used
var listCheck = document.form1.location.selectedIndex;
if (document.form1.location.options[listCheck].value=="none") {
theMessage = theMessage + "\n --> Choose a location";
}
// Make sure a single checkbox is checked
var boxCheck = false;
if (document.form1.confirm.checked) {
boxCheck = true; }
if (!boxCheck) {
theMessage = theMessage + "\n --> Agree to the terms";
}
// If no errors, submit the form
if (theMessage == noErrors) {
return true;
} else {
// If errors were found, show alert message
alert(theMessage);
return false;
}
}
// End -->
</script>
THE FORM CODE
This would go inthe <BODY> section of the page.
<form name="form1" action="http://www.google.com" onSubmit="return validate(this);">
<table width="300" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#cccccc">
<table width="100%" border="0" cellpadding="3" cellspacing="1">
<tr bgcolor="#FFFFFF">
<td align="center">Registration Form</td>
</tr>
<tr bgcolor="#FFFFFF">
<td>Name:<!-- field cannont be left blank --><br>
<input type="Text" name="name" size="20"></td>
</tr>
<tr bgcolor="#FFFFFF">
<td>E-mail address:<!-- field must conform to e-mail standards --><br>
<input type="Text" name="email" size="20">
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td>Registration code:<!-- field must contain 4 characters --><br>
<input type="Text" name="code" maxlength="4" size="4"></td>
</tr>
<tr bgcolor="#FFFFFF">
<td>Gender:<!-- field cannont be left blank --><br>
<input type="Radio" name="gender" value="male">Male<br>
<input type="Radio" name="gender" value="female">Female</td>
</tr>
<tr bgcolor="#FFFFFF">
<td>Which session(s) will you attend:<!-- field cannont be left blank --><br>
<input name="session" type="checkbox" value="morning">Morning<br>
<input name="session" type="checkbox" value="afternoon">Afternoon<br>
<input name="session" type="checkbox" value="evening">Evening</td>
</tr>
<tr bgcolor="#FFFFFF">
<td>Choose a location:<!-- field cannont be left blank --><br>
<select name="location">
<option value="none" selected>Choose ...</option>
<option value="Location #1">Location #1</option>
<option value="Location #2">Location #2</option>
<option value="Location #3">Location #3</option>
</select>
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td><!-- field cannont be left blank -->
<input type="Checkbox" name="confirm">I agree to the terms.</td>
</tr>
<tr bgcolor="#FFFFFF">
<td align="center"><input name="submit" type="submit" value="submit">
<input name="reset" type="reset" value="reset">
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
<table width="300" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#cccccc">
<table width="100%" border="0" cellpadding="3" cellspacing="1">
<tr bgcolor="#FFFFFF">
<td align="center">Registration Form</td>
</tr>
<tr bgcolor="#FFFFFF">
<td>Name:<!-- field cannont be left blank --><br>
<input type="Text" name="name" size="20"></td>
</tr>
<tr bgcolor="#FFFFFF">
<td>E-mail address:<!-- field must conform to e-mail standards --><br>
<input type="Text" name="email" size="20">
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td>Registration code:<!-- field must contain 4 characters --><br>
<input type="Text" name="code" maxlength="4" size="4"></td>
</tr>
<tr bgcolor="#FFFFFF">
<td>Gender:<!-- field cannont be left blank --><br>
<input type="Radio" name="gender" value="male">Male<br>
<input type="Radio" name="gender" value="female">Female</td>
</tr>
<tr bgcolor="#FFFFFF">
<td>Which session(s) will you attend:<!-- field cannont be left blank --><br>
<input name="session" type="checkbox" value="morning">Morning<br>
<input name="session" type="checkbox" value="afternoon">Afternoon<br>
<input name="session" type="checkbox" value="evening">Evening</td>
</tr>
<tr bgcolor="#FFFFFF">
<td>Choose a location:<!-- field cannont be left blank --><br>
<select name="location">
<option value="none" selected>Choose ...</option>
<option value="Location #1">Location #1</option>
<option value="Location #2">Location #2</option>
<option value="Location #3">Location #3</option>
</select>
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td><!-- field cannont be left blank -->
<input type="Checkbox" name="confirm">I agree to the terms.</td>
</tr>
<tr bgcolor="#FFFFFF">
<td align="center"><input name="submit" type="submit" value="submit">
<input name="reset" type="reset" value="reset">
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
Happy Scripting!!!!!!!!!!!!!!!!!!!!!!!!!
No comments:
Post a Comment