Let's Get Started

Let's get started with Web Form Validation!

Open Notepad++
1. Open your index.html file
2. Open your styles.css file
3. Click: New -> File
4. Copy the Form Page Template (HTML) code (below)
5. Paste that code into your new file
6. Click: Save
7. Name the file: validate.html
8. Change the Save as type:
  to: Hyper Text Markup Language file (*.html)
9. Change your page title, your Author name, and your page heading to something appropriate
10. Change: your-email-address to your email address
11. Change the put-legend-here and both put-label-here to something appropriate. For example, Demographic Information, First Name, Last Name
12. Click: New -> File
13. Copy the Form Page JavaScript (JS) code (below)
14. Paste that code into your new file
15. Click: Save
16. Name the file in your includes/ folder: validate.js
17. Change the Save as type:
  to: JavaScript File (*.js)
18. In your index.html file
19. 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>
20. Save your changes
21. Click: Run
22. Choose: Launch in IE
  or Launch in Chrome
  or Launch in Firefox
23. View your web page
24. Make any changes
25. 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 variable
  var fName = document.forms["myForm"]["firstName"].value;
  if (fName == null || fName == "") {
    // display a message in a pop-up window
    alert("Please enter your First Name");
    // Change the background color to indicate the invalid field
    document.forms["myForm"]["firstName"].style.backgroundColor = "#F00";
    // place the user cursor back into the invalid field
    document.forms["myForm"]["firstName"].focus();
    return false; // tell the browser not to submit the form
  } else {
    // Change the background color back to the default
    document.forms["myForm"]["firstName"].style.backgroundColor = "#FFF";
    return true;
  }
}

function validLastName() {
  // get the value entered for lastName and store it in a local variable
  var lName = document.forms["myForm"]["lastName"].value;
  if (lName == null || lName == "") {
    // display a message in a pop-up window
    alert("Please enter your Last Name");
    // Change the background color to indicate the invalid field
    document.forms["myForm"]["lastName"].style.backgroundColor = "#F00";
    // place the user cursor back into the invalid field
    document.forms["myForm"]["lastName"].focus();
    return false; // tell the browser not to submit the form
  } else {
    // Change the background color back to the default
    document.forms["myForm"]["lastName"].style.backgroundColor = "#FFF";
    return true;
  }
}

Example