Exercise 1: Regular Expressions

Write a regular expression that would match the following kinds of patterns. You can use the site Rubular to test your regex.

• Students' letter grades such as A, B+, or D- (try it)
• DNA (strings of A, C, G, or T) in upper/lower case (try it)
• A US ZIP code (try it)
• A credit card number, with optional dashes every 4 numbers (try it)
• A real number such as 3.14 or -42.8775 (try it)
• Dollar amounts of at least $100.00 (try it)
• Words that contain at least two vowels (A, E, I, O, or U) (try it)

Exercise 1: Solutions

Note that there are multiple solutions for each of the regex expressions, but here are some possible ones:

• Grades: /^[abcdf][+-]?$/i
• DNA String: /^[acgt]+$/i
• US ZIPGrades: /^\d{5}(-\d{4})?$/
• Credit Card Number: /^\d{4}(-?\d{4}){3}$/
• Real Number: /^[-]?\d+(\.\d+)?$/
• $100+: /^$[1-9]\d{2,}\.\d{2}$/
• Words with Two Vowels: /^[a-z]*[aeiou][a-z]*[aeiou][a-z]*$/i

Exercise 2: Regex Hybrids!

In this exercise, you will use regex with PHP to display photos of... animals. You can find the starter files and images in this hybrids.zip folder.

Exercise 2 (Continued)

The hybrids.html page uses hybrids.js (completed for you) to make GET requests to regexhybrids.php and display images on the page using the plain text results. When #submit-one button is clicked, a request will be made to regexhybrids.php with a query parameter of animal and a value of whatever the user input into the #animal text input box. If the user clicks on #submit-all instead, a request will be made passing animal=all as the query parameter. The response will then be used to populate the #results div with the resulting images.

Modify regexhybrids.php to use regular expressions so that it will return a plain text result of all images matching the GET parameter (each on their own line) if given any animal query parameter (other than "all"). If passed animal=all, it should instead return a plain text result of all images in the images/ folder. You may find preg_match useful here for matching the image names against a given regular expression.

Working solution

Exercise 3: E-Pizzeria!

In this exercise, you will use regex to validate an online pizzeria order using HTML, JS, and PHP, and explore different methods for provideing a user-friendly experience. You may download all of the starter files in this epizzeria.zip folder. There are three different parts to this exercise, each which serve to demonstrate different validation methods. To keep things organized, we have provided you nearly-identical starter code in the three "part-*" folders located in epizzeria.zip.

Exercise 3: Warm-Up

Before we start implementing validation of our page, what do you think should be true about the user's selections before considering the order successful (make sure to take a look at the epizzeria.html output)? After you have brainstormed as a class some, continue down for more instructions.

Exercise 3: Validation Criteria

Here are some validation criteria which you will now implement for the E-Pizzeria form. If you thought of others, you may also add them for additional practice. These criteria will be used for validation using HTML, JavaScript, and then PHP in the subsequent sub-exercises below.

• Tips must be a non-negative real number with two digits after the decimal
• State must be a two-digit string of uppercase letters
• Address must begin with an integer followed by words, such as "1234 Fifth St."
• Customers may not order more than 2 types of cheese
• Customers may not order more than 3 types of toppings

Exercise 3 Part I: HTML Validation

Use HTML form validation to ensure the criteria is met, using the starter code in the part-i-html-validation folder of your unzipped epizzeria folder. HTML5 includes various features to validate user input without client-side verification (JavaScript) or server-side verification (PHP). These are often included as part of a <form> element, but we will just use <input> tags in the ways we're already familiar with.

You should use the pattern attribute to require certain regex patterns in the HTML order form. You should also you the required attribute to require an input item to be filled before submitting.

Exercise 3 Part II: JS Validation

Next, we will get some practice using client-side validation to ensure the criteria is met. Edit part-ii-js-validation/validation.js in the unzipped epizzeria folder to validate the user's order with the same criteria from Part I, but without HTML5 pattern attributes (there is a fresh template for you to use in your part-ii-js-validation/epizzeria.html. Your JS code should display helpful error messages of your choice in the #order-results div at the top of the page when the submit button is clicked and the input does not pass the criteria.

Exercise 3 Part III: PHP Validation

Use server-side PHP validation to ensure the criteria is met. When the submit button is clicked, you should send a POST request to epizzeria.php (which we have provided starter code for in the part-iii-php-validation folder) and send the various selected options as an array of parameters. We have also provided most of the JS code for you in part-iii-php-validation/epizzeria.js but you may need to edit some of it after finishing epizzeria.php.

Your PHP script should then process the array and verify their validity based on the same criteria as Part I and Part II, but send a plain text response back to the client whether or not their order was "successful". Since this is just a practice exercise, we aren't worrying about storing orders as external data, just verifying that the POST parameters are valid using PHP.