Form Validation

Chapter 12 on form validation is pretty clear, except that it doesn't explain much about regular expressions.

Regular expressions are a powerful and efficient way to match a pattern against a string. Most civilized programming languages have them available, either built-in or as an easily loaded module.

You should think of regular expressions as a whole new language with its own syntax and grammar. It's not a programming language, but it definitely changes the meaning of different characters. Unfortunately, there are often variations in the regular expression languages from Java to Python to JavaScript and so forth.

The MDN article on regular expressions in JavaScript is good and comprehensive, probably more comprehensive than we need. Read the book chapter first, so you understand the role that regular expressions will play, then read part of the MDN article to learn a bit more. Specifically, read from the beginning, up until it explains the meaning of the decimal point. That will explain all the stuff going on the the chapter.

If you don't have the book, here's a link to a copy of a scan of the chapter. To respect the author's copyright, the link is only valid on-campus or with a password. Ask Scott if you don't have that password.

FEWD Chapter 12

What is Form Validation?¶

In general, form data (e.g. your name, address, and credit card data) is sent to a server for more elaborate processing, but before we do that, we should discuss validation. What is form validation? Essentially, it means checking to see that the form has been filled out correctly (as far as we can tell).

Form validation could be used to ensure that someone hasn't overlooked a text input, menu or radio button group, and can check that, for example, the zip code is 5 digits (or 9) and that a telephone number is 10 digits, and that an email address looks like an email address.

Form validation can actually cancel the submission of the form, so that the data never leaves browser. The reason we validate forms is twofold: to give the user immediate feedback that they've missed something, instead of waiting for the server to respond, and to protect the server from having to handle all those invalid forms. Of course, a determined nefarious person can simply disable our form validation JavaScript and hammer our server with invalid forms, but that's rare. The vast majority of invalid forms are just human error.

Obviously, the browser can't tell whether you entered your correct phone number, but it can check that you typed the right number of digits (and only digits). Similarly, it can't check that your spelled your name correctly (and whether your name really is Mickey Mouse), but it can check that you didn't leave that input blank.

With HTML5 and modern web browsers, form validation has gotten a lot easier. In the past, web developers would write JavaScript code that would look at the values in the form to check for bogus values. They wrote libraries and jQuery plug-ins to make the job easier for others.

However, the vast majority of form validation can be done with a few simple things:

• Add the attribute required to any input that you want to require the user to fill out.
• Use the fancy new form input types that HTML5 has added, such as:
  • tel, for telephone numbers
  • email, for email addresses
  • date, for just a date (year, month, day)
  • time, for time (hour, minute, seconds)
  • datetime, combining date and time inputs
  • and others

Here's a demonstration:

<form class="exercise" action="/cgi-bin/dump.cgi">
  <p><label>Username: <input required name="username"></label>
  <label> House:
    <select required name="hogwarts_house">
        <option value="">Hogwarts House</option>
        <option>Gryffindor</option>
        <option>Hufflepuff</option>
        <option>Ravenclaw</option>
        <option>Slytherin</option>
    </select>
    </label></p>
  <p><label>Email address: <input required name="email" type="email"></label></p>
  <p><label>Birthday: <input required name="birthday" type="date"></label></p>
  <p><input type="submit" value="submit form"></p>
</form>

Here's the actual form, so you can change the values of inputs:

Try to submit an incomplete form!