Feedback Form Validation

What is validation?

  1. Validation is a process of making sure that forms are filled out correctly when they are submitted.
  2. For example, e-mail addresses have a specific format that must be followed. Another might be that a field is not optional, so it should not be left empty.
  3. Go to this example page and try to fill out the form with invalid data (bad e-mail address, letters in the phone number, empty name, mismatching passwords, etc).
  4. Notice how it tells you you've done something wrong before you even submit! This is done with JavaScript.
  5. Don't worry about the code below. They are using a certain library to do this, and we will use a different one.
  6. Go ahead and close that page.

LiveValidate

  1. It's possible to write validation JavaScript from scratch, but it's a pain! Let's use a library.
  2. Go to Live Validation.
  3. Go to the downloads page and save the standalone package as "livevalidation.js" in your feedback folder.
  4. Open the HTML of your feedback form to edit.
  5. Add two script tags and an onload event like those below.
    6. script tags and onload event
  6. Notice that one of the script tags is for the file we just saved. The other is for one we are about to create.

validate.js

  1. Open a new Notepad and save it as "validate.js" in your feedback folder.
  2. Add the code that defines the loadValidation function:
    3. loadValidation definition
  3. Take a moment to look at this code and see if you can figure it out.
  4. So far, this code tests whether the name has proper characters and if it is the right length.
  5. Test your form using the list of names below. If there are any that you think should work, adjust the validation code until you get the desired result.
    6. names to test
  6. Also, don't you think the name field should be required? What happens if it's empty? We should fix that.

Adding Validation Requirements

  1. Go back to the Live Validation Web site.
  2. Click on "documentation."
  3. Look for examples of how to use the code that we are already using, in order to understand it better.
  4. Then, look at the documentation for how to use the Presence function.
  5. Finish the validation of the name field by making it required.

Extra Time Today

  1. Read this article to find out some design principles of using JavaScript validation.
  2. This site provids a chart of regex pattern codes for Format matchin.