Use JavaScript to Validate Your Web Form

For this assignment you should first read the appropriate chapters in the textbook and also the Form Validation with JavaScript web page listed in the Useful Linkssection and also search the Internet using your favorite search engine site (Bing, Google, MSN, Yahoo, whatever) for:

+javascript +form +validation 

and then create a new web page file, for example called validation.html, in your ubunix.buffalo.edu account just as you did in previous assignments. This web page should build on your Web Page Form Assignment.

Assignment Requirements

This assignment will use JavaScript functions to include the following:

display the current date and time

display a set of radio buttons that allow the user to change the background color and the text color of the web page by clicking on the desired radio button

advise the user filling out your form with a sentence above the form noting that certain fields are required and using CSS to either make those fields red or placing a CSS styled bold red asterisk (*) next to each required field

validate the form fields according to these validation rules: pops up a JavaScript alert window advising the user exactly what field did not pass the validation checks

First Name and Last Name are not empty

Zip Code is either: only 5 or 9 numbers or in the format 99999-9999

Phone Number is either:

only 10 numbers or in the format (999) 999-9999

Email has one and only one @ character, has at least one character before the @ character, and has at least one character and a period and at least 2 characters after the @ sign. valid: gerland@buffalo.edu not valid: gerland.buffalo.edu not valid: gerland@buffaloedu not valid: @buffalo.edu

places the cursor back in the invalid field after the user clicks the OK button on the alert window,using the .focus() JavaScript method, if there is a validation problem.

add the novalidate attribute to the

tag so the browser is *NOT* doing the validation and so you and I can test your JavaScript validation.

While designing, coding, and testing this page you may want to ustilize the Browser Developer Tools (see Useful Tips). to view the JavaScript Console for warnings and errors. You can also use the JavaScript console.log() method to display variable values in the Console to help debug your code.

This web page should also have a link back to your Home Page web page.

You *MUST* use the W3c HTML5/CSS3 validator page at http://validator.w3.org/unicorn/ to verify your code.

You should then add an a (anchor) tag to your Home Page web page that opens your Form Validation web page.

When you have this Assignment ready for me to view and grade you should click on this assignment and then chose "Write Submission" and type the URL of your web page so I can click on that link and open your Assignment in a new browser window (target="_blank").