Change the Save as type:
to: Hyper Text Markup Language file (*.html)
Change your page title, your Author name, and your page heading to something appropriate
Change: your-email-address to your email address
Change the put-legend-here and both put-label-here to something appropriate. For example, Demographic Information, First Name, Last Name
Click: New -> File
Copy the Form Page JavaScript (JS) code (below)
Paste that code into your new file
Click: Save
Name the file in your includes/ folder: validate.js
Change the Save as type:
to: JavaScript File (*.js)
In your index.html file
Add a link to this page.
Change: <li>Use JavaScript to Validate a Form Page</li>
to: <li><a href="validate.html">Use JavaScript to Validate a Form Page</a></li>
Save your changes
Click: Run
Choose: Launch in IE
or Launch in Chrome
or Launch in Firefox
View your web page
Make any changes
Save your changes
Form Page Template (HTML)
<!doctype html>
<html>
<head>
<title>page title goes here</title>
<!-- put your name in this comment line -->
<link href="includes/styles.css"rel="stylesheet"/>
<script src="includes/validate.js"></script>
</head>
<body>
<h2>My Form Page</h2>
<form id="myForm"name="myForm"method="POST"action="mailto:your-email-address"onsubmit="return validateForm();"/>
<fieldset>
<legend>put-legend-here</legend>
<label for="firstName">First Name:</label>
<input type="text"id="firstName"name="firstName"size="25"/><br/>
<label for="lastName">Last Name:</label>
<input type="text"id="lastName"name="lastName"size="25"/><br/>
<input type="submit"id="submit"name="submit"value="OK Send My Data"/>
</fieldset>
</form>
<p>This page was last modified on:
<script>document.write(document.lastModified);</script>.</p>
</body>
</html>
Form Page JavaScript (JS)
function validateForm() {
if (!validFirstName()) { return false; }
if (!validLastName()) { return false; }
return true;
}
function validFirstName() {
// get the value entered for firstName and store it in a local variablevar fName = document.forms["myForm"]["firstName"].value;
if (fName ==null || fName =="") {
// display a message in a pop-up windowalert("Please enter your First Name");
// Change the background color to indicate the invalid fielddocument.forms["myForm"]["firstName"].style.backgroundColor = "#F00";
// place the user cursor back into the invalid fielddocument.forms["myForm"]["firstName"].focus();
return false; // tell the browser not to submit the form
} else {
// Change the background color back to the defaultdocument.forms["myForm"]["firstName"].style.backgroundColor = "#FFF";
return true;
}
}
function validLastName() {
// get the value entered for lastName and store it in a local variablevar lName = document.forms["myForm"]["lastName"].value;
if (lName ==null || lName =="") {
// display a message in a pop-up windowalert("Please enter your Last Name");
// Change the background color to indicate the invalid fielddocument.forms["myForm"]["lastName"].style.backgroundColor = "#F00";
// place the user cursor back into the invalid fielddocument.forms["myForm"]["lastName"].focus();
return false; // tell the browser not to submit the form
} else {
// Change the background color back to the defaultdocument.forms["myForm"]["lastName"].style.backgroundColor = "#FFF";
return true;
}
}