Create a new web page file, for example called validation.html, in your bscacad3.buffalostate.edu account just as you did in previous assignments. This web page should build on your Web Page Form Assignment and use JavaScript functions to include the following:

add the novalidate element to your

tag so the browser does *NOT* do validation

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 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 dot and at least 2 characters after the @ sign. valid: gerlanjr@buffalostate.edu not valid: gerlanjr.buffalostate.edu not valid: gerlanjr@buffalostate.edu not valid: @buffalostate.edu

places the cursor back in the invalid field after the user clicks the OK button on the alert window if there is a validation problem.

Here is what I wrote to create the actual form page

HTML

My Form Page

If want to see more of my site, join me by signing using filling out the contact form or go back to the homepage!

First name:

Last name:

City:

Address:

State/Province:

Zip/Postal Code:

Phone:

Email Address:

CSS

body{

background-color: #42f492;

}

h1{

text-align:center;

font-family: "Courier New";

font-size: 50px;

color: steelblue;

}

p{

font-family: "Courier New";

font-size: 12pt;

text-align:center;

color: black;

}

form{

margin:20px auto;

width:320px;

color:steelblue;

}

input{

padding:10px;

font-size: inherit;

display:block;

margin-bottom:25px;

width:100%;

border:2px solid steelblue;

font-family: Courier New;

}

Thank you:)