ASSIGNMENT POINTS DUE DATE: Monday NOV 30 JAVASCRIPT, INPUT VALIDATION, REGEX See 2 nd slide for Form See 3 rd next slide for the required features Humpty-Dumpty Problem: Break the address information into pieces and apply Javascript to validate these components. Once the valid inputs are sent to the web server glue them back together w. PHP again as the complete Address and register them to the database as usual. There is also an embedded PHP-generated menu in the Form.

Legend for EXTENDED HTML REGISTRATION form submit Labels Password fields Text field field Legend for Broken-up Address Text fields The usual hyperlinks … PHP Dynamic Generated Menu from DB table HTML5 Pattern attribute In text field Menu Javascript tested Pattern w. onblur Event; textarea User Fullname Major Cell Confirm Password User password Town Street address State Zipcode

1. PHP Dynamic Generated Menu from DB table 4. HTML5 Pattern attribute In text field 3. Menu 2. Javascript tested Pattern w. onblur Event; textarea Town Street address State Zipcode 1.Use PHP script to generate menu of NJ towns to be embedded in the form as an input element. See also Video 7G. 2.Use Javascript [similar to the one used to compare passwords for equality.] But here script is called on an onblur event in the textarea. The onblur triggers a new Javascript function that might be named (for example) check_address(). This function should enter in a warning in a span element if the contents have characters other than alphanumeric characters or commas, dashes, and periods as might occur in a street address. But no other characters. If there is an illegal character (anything but those mentioned) then enter a warning, else erase any current span warning. However, do not erase the contents of the textarea as we did in the password equality script. [It would be annoying to force a user to re-enter the entire street address.] To block the form if invalid data is still present - see (5) below. 3.Any hard-coded or PHP-generated menu will do for this. Remember to give the menu/select element a name since it is an input element in a form. 4.Test for a valid 5 digit or 9 digit zip code. Either length is considered valid. Use the HTML5 pattern attribute and a simple pattern. Videos 7A and 7B are relevant. PHP side: When the address inputs are received from the browser you can sanitize them with mysql_real_escape_string as usual -- then just concatenate them together as the complete address to be inserted into the Address column of the REGISTERED table. 5.Introduce an onsubmit event in the tag that calls a function named blocker() as in onsubmit="return blocker()". The blocker function should return false if the span warning for the textarea is non-empty that is its.innerHTML != "" else it should return true. This will block the form's submission if false is returned. BONUS: Use an onkeyup event for the textarea to call a function that detects errors as they are typed or removes existing warnings as error corrected. See Video 7D for demo with similar behavior.