I need to complete 3 validation cases in this Javascript code. I need to validat
ID: 675467 • Letter: I
Question
I need to complete 3 validation cases in this Javascript code. I need to validate email, phone and street address. How would I go about validating these 3 cases in this code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Week 10: Regular Expressions</title>
<style type="text/css">
span {
padding: 2px;
}
.success {
color: #008000;
background: #99cc99;
}
.failure {
color: #ff0000;
background: #ff9999;
}
</style>
<script type="text/javascript">
function validateInput(form) {
var result0 = document.getElementById('result0'),
result1 = document.getElementById('result1'),
result2 = document.getElementById('result2'),
result3 = document.getElementById('result3');
// Replace the following with validation for email
result0.innerHTML = 'invalid!';
result0.className = 'failure';
// Replace the following with validation for phone
result1.innerHTML = 'invalid!';
result1.className = 'failure';
// Replace the following with validation for address
result2.innerHTML = 'invalid!';
result2.className = 'failure';
// Postal Code Example
var pcodeRegex = /^(d{5})(-d{4})?$/;
if (pcodeRegex.test(form.pcode.value)) {
result3.innerHTML = 'valid!';
result3.className = 'success';
} else {
result3.innerHTML = 'invalid!';
result3.className = 'failure';
}
}
</script>
</head>
<body>
<form id="form1" method="get" action="">
<table>
<tr>
<td><label for="email">Email:</label></td>
<td><input id="email" type="text" value="user@domain.com" /></td>
<td><span id="result0"></span></td>
</tr>
<tr>
<td><label for="phone">Phone:</label></td>
<td><input id="phone" type="text" value="(987) 654-3210" /></td>
<td><span id="result1"></span></td>
</tr>
<tr>
<td><label for="address">Street Address:</label></td>
<td><input id="address" type="text" value="2801 W. Bancroft" /></td>
<td><span id="result2"></span></td>
</tr>
<tr>
<td><label for="pcode">Postal Code:</label></td>
<td><input id="pcode" type="text" value="43606" /></td>
<td><span id="result3"></span></td>
</tr>
<tr>
<td colspan="3"><input type="submit" value="Submit" /></td>
</tr>
</table>
</form>
</body>
</html>
Explanation / Answer
1). Email validation
var emailRegex = /^([w-]+(?:.[w-]+)*)@((?:[w-]+.)*w[w-]{0,66}).([a-z]{2,6}(?:.[a-z]{2})?)$/i;
if (emailRegex.test(form.email.value)) {
result0.innerHTML = 'valid!';
result0.className = 'success';
} else {
result0.innerHTML = 'invalid!';
result0.className = 'failure';
}
2). Phone validation
var phoneRegex = /^(?([0-9]{3}))?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
if (phoneRegex.test(form.phone.value)) {
result1.innerHTML = 'valid!';
result1.className = 'success';
} else {
result1.innerHTML = 'invalid!';
result1.className = 'failure';
}
3). address validation
var addressRegex = /^[a-zA-Zsd/]*d[a-zA-Zsd/]*$/;
if (addressRegex.test(form.address.value)) {
result2.innerHTML = 'valid!';
result2.className = 'success';
} else {
result2.innerHTML = 'invalid!';
result2.className = 'failure';
}
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.