ZuoTi.Pro
Question

I need to complete 3 validation cases in this Javascript code. I need to validate email,...

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" onsubmit="validateInput(this); return false;" method="get" action="">
<table>
<tr>
<td><label for="email">Email:</label></td>
<td><input id="email" type="text" value="[email protected]" /></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>

engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

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-Z\s\d\/]*\d[a-zA-Z\s\d\/]*$/;
if (addressRegex.test(form.address.value)) {
result2.innerHTML = 'valid!';
result2.className = 'success';
} else {
result2.innerHTML = 'invalid!';
result2.className = 'failure';
}

0 0
Add a comment
Know the answer?
Add Answer to:
I need to complete 3 validation cases in this Javascript code. I need to validate email,...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • NEED HELP with HTML with Javascript embedding for form validation project below. I have my code...

    NEED HELP with HTML with Javascript embedding for form validation project below. I have my code below but I'm stuck with validation. If anyone can fix it, I'd really appreciate. ****************************************************************************** CODE: <!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. --> <html> <head> <title>Nice</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script> var textFromTextArea; function getWords(){ var text =...

  • <html>     <head>       <title>Sign Up page</title>   <form name="validationForm" method="post" onsubmit="return checkvalidation()">      &n

    <html>     <head>       <title>Sign Up page</title>   <form name="validationForm" method="post" onsubmit="return checkvalidation()">         <!--div class-->       <div class="formvalidation">       <label>Your first Name</label>        <span id="showname"></span>        <!--label for firstname-->       <input type="text" name="firstname" class="formsignup"  id ="firstn" placeholder="Enter your Name">      <br><br>           <!--lastname-->       <label>Your last Name</label> <span id="showlname"></span>       <input type="text" name="lastname" class="formsignup" id="lastn" placeholder="Enter your last Name">       <br><br>        <!--email-->         <label>Your Email</label>          <span id="showemail"></span>         <input type="email" name="emailid" class="formsignup" size="45" id="emailn" placeholder="Enter your Email">        <br><br> <input type="submit" value="send">     </div>           </form> <script>      function checkvalidation(){     var name = document.forms["validationForm"]["firstname"].value;     var lname...

  • How to write javascript to do following requirement: I have written code like this: How can...

    How to write javascript to do following requirement: I have written code like this: How can i write the javascript to do the requirement. Add onblur event handlers on each of the text inputs to perform validation based on the specific requirements listed below. Turn that element's border colour to green or red if that input is found to be valid or invalid, respectively * o Name: valid only if the text length is at least 5 characters o Email:...

  • Hello, this is my code. moest of the things works but when select the price, i...

    Hello, this is my code. moest of the things works but when select the price, i just dont get my total. can someone help me out . thank you My queshion is also here The page will simulate the site for a Chicago-based small bus line that travels to St Louis, Milwaukee, and Detroit. Here are the requirements: The home page (i.e. the main page) should simply be the heading, image, and slogan of the site.  The home page should NOT...

  • Both codes <!DOCTYPE html> <html> <head> <title>Week 8 Lab - JavaScript DOM and Arrays</title> <meta charset="utf-8">...

    Both codes <!DOCTYPE html> <html> <head> <title>Week 8 Lab - JavaScript DOM and Arrays</title> <meta charset="utf-8"> </head> <body> <h2>Order Form</h2> <form name="orderForm" method="post" action="processForm.html"> <table> <tr> <th colspan="2">Personal Information</th> </tr> <tr> <td>First Name:</td> <td><input type="text" name="firstName" id="firstName" size="30"></td> </tr> <tr> <td>Last Name:</td> <td><input type="text" name="lastName" id="lastName" size="30"></td> </tr> <tr> <td>Address:</td> <td><input type="text" name="address" id="address" size="30"></td> </tr> <tr> <td>City:</td> <td><input type="text" name="city" id="city" size="30"></td> </tr> <tr> <td>Province:</td> <td><select name="province" id="province" size="1"> <option disabled>Select a province</option> <option value="BC">British Columbia</option> <option value="AB">Alberta</option> <option...

  • I have the code buts its not working as this below instruction can anyone help Use...

    I have the code buts its not working as this below instruction can anyone help Use the requirements from the pizza part of Assignment 6 and do the following using CSS and an internal style sheet: 1.     Your Javascript function should be in an external file (don’t forget to move it up to studentweb too) 2.     Put a red border of 300px in width around the form 3.     There should be three Div sections: header, main_body, and footer. 4.     Center the name of your...

  • I have some code for HTML/Javascript but I need to change it up a bit. Heres...

    I have some code for HTML/Javascript but I need to change it up a bit. Heres the assignment and what I have. The part in the bold is what I need help with. I need a button called new timer for when it reaches zero... Thank you. Assignment For this assignment, you will write a timer application in HTML and JavaScript. Your HTML document should contain the following elements/features: HTML tags: An <input> tag labeled "Timer Duration" with the initial...

  • HTML Coding <html> <head> <title> Contact -- Charles Robertson </title> </head> <body bgcolor="white"> <table width="700" height="500"...

    HTML Coding <html> <head> <title> Contact -- Charles Robertson </title> </head> <body bgcolor="white"> <table width="700" height="500" border="10"> <!-----row---1----logo---> <tr><td> <img src="20150516_084745" width="700" height="200"> </td></tr> <!-----row-2-navigation-----> <tr><td> <!----start-navigation-table----> <table width="700" height="100" border="5" bgcolor="lightgreen" > <tr><td><a href="HerbFarm.html"> <center> HOME </center></a></td> <td><a href="about3.html"> <center> ABOUT </center></a></td> <td><a href="contact3.html"> <center> CONTACT </center></a></td> <td><a href="gallery3.html"> <center> GALLERY </center></a></td> </tr> </table> <!------end-navigation-table----> </td></tr> <tr><td> <h1>Contact </h1> <form action="thankyou.html">    </form> <div class="row"> <div class="col-75"> <div class="container"> <form action="/action_page.php"> <div class="row"> <div class="col-50"> <h3>Billing Address</h3> <label for="fname"><i...

  • Below is the code created for a previous assignment. I now need to create functions to...

    Below is the code created for a previous assignment. I now need to create functions to validate the name, age, and item selection in an external JavaScript file. Specifically, check for the following: The user has entered a name Age is a number between 18 and 110 An item is selected Ensure that a handler returns true if the input is acceptable and false otherwise. Add an onSubmit attribute to the form tag so that a validation failure prevents the...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT