1.In the JavaScript file, note that three functions are supplied. The $ function. The validatePhone function that contains the validation code. And an onload event handler that attaches the validatePhone function to the click event of the Validate button.

2. 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.

3. When the validation in step 4 is working correctly, change the new pattern so that 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.

4. When the validation is step 5 is working correctly, change the new 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 part:

Validate phone number

Phone Number:

This is the JS code to work on:

"use strict"; var $ = function(id) { return document.getElementById(id); };

var validatePhone = function() { var phone = $("phone").value; var pattern = /^\d{3}-\d{3}-\d{4}$/; // 999-999-9999 var isValid = pattern.test(phone); $("message").firstChild.nodeValue = (isValid) ? "Valid phone number" : "Invalid phone number"; };

window.onload = function() { $("validate").onclick = validatePhone; $("phone").value = "123-456-7890"; // set default phone number };