Skip to content

Apr 22: Validating Input

Learning Objectives

After today's class, you should be able to:

  • Design an HTML form with at least 10 different types of input.
  • Perform client-side validation using built-in form attributes.
  • Describe how regular expressions can be used for validation.

Lesson Outline

Slides [20 min]

Practice [40 min]

  • Complete activities as a team
  • Discuss solutions as a class

Work Time [15 min]

Forms Activity

Optional

Required

  1. Test your skills: HTML5 controls
    • html/forms/tasks/html5-controls/html5-controls1-download.html
    • html/forms/tasks/html5-controls/html5-controls2-download.html
  2. Test your skills: Form validation
    • html/forms/tasks/form-validation/form-validation1-download.html
    • html/forms/tasks/form-validation/form-validation2-download.html
    • html/forms/tasks/form-validation/form-validation3-download.html

RegEx Activity

Getting Started

Download and open the following files in VS Code:

Press Ctrl+F (or Cmd+F on macOS) to open the Find tool. Click the .* icon to use regular expressions. Then search for each pattern described below.

Matching Words

  1. Write a regular expression to match the names of the eight planets: Mercury, Venus, Earth, Mars, Jupiter, Saturn, Uranus, and Neptune.
    • There are 44 lines in BleakHouse.txt that match this expression.
  2. Write a regular expression to match a quoted string, that is, a string that starts and ends with double quotes on a single line that contains at least one character between the quotes.
    • To make sure that this is not the end of one quote and the start of another, make sure that the first quote has either the start of the line or a non-word character before it, and the second has a non-word character after it.
    • There are 4318 such lines in BleakHouse.txt.
  3. Write a regular expression to find all lines with words that begin with "rain". This includes "Rain", "raindrop", "raining", etc., but not "brains".
    • There are 37 such lines in BleakHouse.txt.
  4. Write a regular expression to find all lines with the word "east". This includes "East", but not "eastern".
    • There are 20 such lines in BleakHouse.txt.
  5. Write a regular expression to find all lines with hyphenated words in them. For example, this includes "assembly-room", "half-a-dozen", and even "en-r-r-r-raged."
    • There are 2041 such lines in BleakHouse.txt.

Matching Numbers

  1. Write a regular expression to match a sequence of digits.
    • This should match only the first line in numbers.txt.
  2. Write a regular expression to match social security numbers.
    • This should match only the second line in numbers.txt.
  3. Write a regular expression to match numbers with commas, as in 23,354.
    • This pattern should match only the third, fourth, and fifth lines of numbers.txt.
  4. Write a regular expression to match a string of digits with a decimal point. The decimal point can be first or last, but it must be there, and there must be at leat one digit.
    • This pattern should match only the eighth, ninth, and tenth lines of numbers.txt.
  5. Write a regular expression to match real numbers that optionally begin with a sign (that is + or -), followed by a sequence of at least one digit that may contain a dot, optionally followed by an “e” or “E”, followed by an optional sign and at least one digit.
    • This pattern should match the first, eighth through tenth, and the last five lines of numbers.txt (that is, all the lines with what we would normally consider numbers not containing commas).

Going Further

The following websites are great resources for learning (and explaining) regular expression syntax: