Homework Sourse1In the JavaScript file note that three functions are suppli
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, it’s 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, you’ll want to allow blank spaces instead of dashes or periods after the optional “1” and after the area code.
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
};
Solution
<!DOCTYPE html>
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<title></title>
</head>
<body>
<p id=\"phone\"></p>
<p id=\"message\"></p>
<p id=\"updateNum\"></p>
<input type=\"submit\" id=\"validate\" value=\"Click\" />
<script>
//for creating an alias to $
//Note:- Here I used $, but you can use any valid variable name.
var $ = function (id) { return document.getElementById(id); };
//for the number is valid phone number or not.
var validatePhone = function () {
var phone = $(\"phone\").value;
var pattern = /\\+?\\s?(\\d{1})-(?:\\d{1}\\s)?\\(?(\\d{3})\\)?-?\\s?(\\d{3})-?\\s?(\\d{4})/; // 999-999-9999
var isValid = pattern.test(phone);
$(\"message\").innerHTML = (isValid) ? \"Valid phone number\" : \"Invalid phone number\";
$(\"phone\").value = \"+1 \" + phone;
$(\"updateNum\").innerHTML = $(\"phone\").value;
};
//on load function is execute at the end of program.
window.onload = function () {
$(\"phone\").value = \"123-456-7890\"; // set default phone number
$(\"validate\").onclick = validatePhone;
};
</script>
</body>
</html>
