Guide to HTML, CSS, and JavaScript (Computer Science 4 All Version)

Chapter 11: Adding JavaScript Validation to Your Web Form Page

Not all browsers support HTML5 and even those that do, may not support the HTML5 form features for required input fields, input data types, or data validation.

You may still need to utilize JavaScript to manage your form validation. To tell the browser to invoke your JavaScript function you would add the onsubmit="return validateForm();" attribute to your <form> tag.

Using JavaScript to Validate Web Form Data

A very simple JavaScript function to check whether a given field (such as *firstName*) in a form (such as *myForm*) is empty would be:

function validateForm() {
  if (!validateFirstName()) {
    return false; // tell the browser not to submit the form 
  }
  if (!validateZipCode()) {
    return false; // tell the browser not to submit the form
  }
  return true; // form fields are valid 
}

function validateFirstName() {
  // get the value entered for firstName and store it in a local variable
  var fName = document.forms["myForm"]["firstName"].value;
  if (firstName == null || firstName == "") {
    // 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;
  } else {
    // Change the background color back to the default
    document.forms["myForm"]["firstName"].style.backgroundColor = "#FFF";
    return true;
  }
}

function validateZipCode() {
  // get the value entered for zipCode and store it in a local variable
  var zipCode = document.forms["myForm"]["zipCode"].value;
  // Setup a pattern
  var isValid = /^([0-9]{5})(?:[-\s]*([0-9]{4}))?$/.test(zipCode);
  if (!isValid) {
    // display a message in a pop-up window
    alert("Please enter a valid Zip Code (5 or 9 digits)");
    // Change the background color to indicate the invalid field
    document.forms["myForm"]["zipCode"].style.backgroundColor = "#F00";
    // place the user cursor back into the invalid field
    document.forms["myForm" ]["zipCode"].focus();
    return false; 
  } else {
    // Change the background color back to the default
    document.forms["myForm"]["zipCode"].style.backgroundColor = "#FFF";
    return true;
  }
}

Figure 11-1: A JavaScript "Validation" Function

Task - Add JavaScript Validation to Your Web Form Page

For this task you should create a new web page file just as you did in previous tasks. This web page should build on your Web Page Form task and use JavaScript functions to include the following:

The current date and time
Display a set of radio buttons that allow the user to change the background color of the web page by clicking on the desired radio button
Validate the form fields according to these validation rules:
- First Name and Last Name are not empty
- Zip Code is either:
  - only 5 numbers
    or
    in the format 99999-9999
- Phone Number is either:
  - only 10 numbers
    or
    in the format (999) 999-9999
- Email has one and only one @ character, has at least one character before the '@' character, and has at least one character and a dot and at least 2 characters after the '@' sign.
  - valid: gerland@buffalo.edu
  - not valid: gerland.buffalo.edu
  - not valid: gerlandbuffalo.edu
  - valid: @buffalo.edu
- Pop up a JavaScript alert window advising the user exactly what field did not pass the validation checks
- Place the cursor back in the invalid field after the user clicks the OK button on the alert window if there is a validation problem.

You *MUST* use the W3C Unicorn Validator to validate your HTML5/CSS3 code.

This web page should also have a link back to your Home Page task web page.

You should then add an <a> (anchor) tag to your Home Page web page that opens your advanced CSS web page.

Let's Get Started with JavaScript Navigation! | Let's Get Started with JavaScript DOM Manipulation! |