Head First JavaScript Code: Chapter 7, Forms and Validation

Chapter 7 Opening Image

You don't have to be suave or sneaky to successfully get information from users with JavaScript.

Head First JavaScript

But you do have to be careful. Humans have this strange tendency to make mistakes, which means you can't always count on the data provided in online forms being accurate. Enter JavaScript. By passing form data through the right JavaScript code as it is being entered, you can make Web applications much more reliable, and also take some load off of the server. We need to save that precious bandwidth for important things like stunt videos and cute pet pictures.

Download the Code

Code Description and Viewing

Bannerocity

The Bannerocity web page is built incrementally throughout the chapter. Each numbered HTML file corresponds to an incremental version of the web page. When a page number appears beside a file, it is either the page where the file's contents are presented or the exercise (solution) corresponding to the file. The Order Banner button ONLY works if the page is opened from a real web server. The button WON'T work when the page is opened directly from your local hard disk because the PHP server script requires a web server. This doesn't limit the JavaScript code in any way.

  • bannerocity1.html - Bannerocity web page with non-empty data validation (page 301)
  • bannerocity2.html - Bannerocity web page with passive help system and length data validation (page 308)
  • bannerocity3.html - Bannerocity web page with ZIP code validation (page 312)
  • bannerocity4.html - Bannerocity web page with order placement validation (page 314)
  • bannerocity5.html - Bannerocity web page reworked to use regular expressions (page 327)
  • bannerocity6.html - Bannerocity web page with date validation (page 330)
  • bannerocity7.html - Bannerocity web page with phone number and email validation (page 338)
  • bannerocity.php - PHP server script that processes aerial banner orders for the Bannerocity web page
  • logo.png - Logo image that appears on the Bannerocity web page