youll adjust a regular expression pattern that validates phone numbers so it accepts more options.

Open the HTML and JavaScript files attached to this assignment. View them in your browser to see how they work.

1. Click on the Validate button and note that the application correctly says the default phone number (123-456-7890) is in a valid format. Now, change the phone number to look like this: "(123)456-7890" and click Validate again. This time, the application says the phone number is invalid.

2. In the JavaScript file, note that the ready event handler contains a handler for the click event of the Validate button that contains the validation code.

3. Change the regular expression pattern in the pattern variable so the phone number can contain an optional 1- prefix. The best way to do this is to copy the pattern variable to a new line and then comment out the original. This way, you can refer to the original pattern as you adjust it.

4. When the validation in step 3 is working correctly, change the pattern so the phone number can also contain either dashes or periods. Again, its best to make a copy so you can refer to what came before.

5. When the validation in step 4 is working correctly, change the pattern so the phone number can have optional parentheses around the area code. To accommodate this change, youll want to allow blank spaces instead of dashes or periods after the optional 1 and after the area code.

Html Code:

Validate phone number

Phone Number:

Javascript Code:

"use strict";

$(document).ready(function() {

$("#validate").click(function() {

var phone = $("#phone").val();

var pattern = /^\d{3}-\d{3}-\d{4}$/; // 999-999-9999

var isValid = pattern.test(phone);

$("#message").text( (isValid) ? "Valid phone number" : "Invalid phone number" );

$("#phone").focus();

}); // end click()

$("#phone").val( "(123)-456-7890" ); // set default phone number

$("#phone").focus(); // set focus on initial load

}); // end ready()

CSS Code:

body {

font-family: Arial, Helvetica, sans-serif;

background-color: white;

margin: 0 auto;

width: 400px;

border: 3px solid blue;

padding: 0 2em 1em;

}

h1 {

color: blue;

}

label {

float: left;

width: 11em;

text-align: right;

padding-bottom: .5em;

}

input {

margin-left: 1em;

margin-bottom: .5em;

}

#message {

margin-left: 1em;

color: red;

}