ZuoTi.Pro
Question

Add JavaScript scripts to the pizza order form to validate the formats of the phone number...

  • Add JavaScript scripts to the pizza order form to validate the formats of the phone number and email.
  • Validate the formats of the phone number and email when the previous validations have passed.
  • Validate the phone number:
    • If the phone number is not empty, validate that the phone number is in one of the following formats:
      • ‘ddd-ddd-dddd’ – 10 digits with two dashes where the first dash is between the third and fourth digits and the second dash is between the sixth and seventh digits.
      • ‘dddddddddd’ – all 10 digits.
      • ‘(ddd)ddddddd’ – 10 digits with the first three digits being enclosed by parentheses.
      • ‘(ddd)ddd-dddd’ – 10 digits with the first three digits being enclosed by parentheses, and there is a dash between the sixth and seventh digits.
    • Provide an alert if the phone number is not in the required formats.
  • Validate the email:
    • If the email is not empty, validate that the email string satisfies the following requirement:
      • Email string must be in the format: [email protected], where xxxx is an arbitrary string consisting of printable characters except for @.
    • Provide an alert if the email is not in the correct format.
  • If the validations are passed, print out the order information as before.
engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

<!DOCTYPE html>
<html>
   <head>
       <title>Pizza Order</title>
       <link rel="stylesheet" type="text/css" href="pizzaOrder.css">
   </head>
   <body>
       <form method="POST" id="regForm" enctype="multipart/form-data" accept-charset="utf-8">
       <h1>Pizza Order:</h1>
       <center>
           <div class="tab">
              
               <p>
                   <input placeholder="Phone Number" name="phoneNum" id="phoneNum" onkeyup="validatePhoneNumber()">
                   <span class="input-error" id="phoneNum_Msg">
                       Phone Number formats must be one of the following:
                       <br>
                       ‘ddd-ddd-dddd’ , ‘dddddddddd’ , ‘(ddd)ddddddd’ , ‘(ddd)ddd-dddd’
                       <br> d is the digit(0-9)
                   </span>
               </p>
               <p>
                   <input placeholder="Email Address" name="email" id="email" onkeyup="validateEmail();">
                   <span class="input-error" id="email_Msg">
                       Email string must be in the format: [email protected], where xxxx is an
                       <br>arbitrary string consisting of printable characters except for @.
                   </span>
               </p>
               <p>
                   <button type="button" id="submit" onclick="validateForm()">Submit</button>
               </p>
           </div>
       </form>
   </body>
   <script src="pizzaOrder.js"></script>
</html>

---------------------------------------------- pizzaOrder.css ------------------

body
{
   margin:0;
}
* {
   box-sizing: border-box;
}

body {
background-color: #f1f1f1;
}

#regForm {
background-color: #ffffff;
margin: 10px auto;
font-family: Raleway;
padding: 10px;
width: 50%;
min-width: 400px;
}

h1 {
text-align: center;
}

input{
padding: 10px;
width: 50%;
font-size: 15px;
font-family: Raleway;
border: 1px solid #aaaaaa;
}

/* Mark input boxes that gets an error on validation: */
input.invalid {
background-color: #ffdddd;
}

/* Hide all steps by default: */
.tab {
   margin:10px auto;
  
border:3px solid #006666;
padding:5px;
background-color:#e6e6e6;
  
  
}

.tab:hover
{
   border-color:powderblue;
}
button {
background-color: #4CAF50;
color: #ffffff;
border: none;
padding: 10px 20px;
font-size: 17px;
font-family: Raleway;
cursor: pointer;
}

button:hover {
opacity: 0.8;
}

#prevBtn {
background-color: #bbbbbb;
}


.input-error
{
   color:red;
   display:none;
}

//-------------------- pizzaOrder.js ----------------

var pattern1 = /^\d{3}-\d{3}-\d{4}$/;
var pattern2 = /^\d{10}$/;
var pattern3 = /^\(\d{3}\)\d{7}$/;
var pattern4 = /^\(\d{3}\)\d{3}-\d{4}$/;
var emailPattern = /^[^@]+@[^@]+.[^@]+$/
function validatePhoneNumber()
{
  
   var phoneNum = document.getElementById("phoneNum");
   if(!phoneNum)
   {
       return false;
   }
   var phoneNum_Msg = document.getElementById("phoneNum_Msg");
   if(!phoneNum.value.match(pattern1) && !phoneNum.value.match(pattern2) && !phoneNum.value.match(pattern3) && !phoneNum.value.match(pattern4) )
   {
       phoneNum_Msg.style.display="block";
       phoneNum.className=" invalid";
       return false;
   }
   else
   {
       phoneNum_Msg.style.display="none";
       phoneNum.className="";
       return true;
   }
}
function validateEmail()
{
   var email = document.getElementById("email");
   if(!email)
   {
       return false;
   }
   var email_Msg = document.getElementById("email_Msg");
   if(!email.value.match(emailPattern))
   {
       email_Msg.style.display="block";
       email.className=" invalid";
       return false;
   }
   else
   {
       email_Msg.style.display="none";
       email.className="";
       return true;
   }
}

function validateForm()
{
   var phoneResult = validatePhoneNumber();
   var emailResult = validateEmail();
  
   if(phoneResult && emailResult)
   {
      
       var form = document.getElementById("regForm");
       form.submit;
       alert("Form submitted successfully");
   }
   else
   {
       alert("Still errors in your form");
   }
}

//OUTPUT

Pizza Order: Phone Number Email Address SubmitPizza Order: Phone Number formats must be one of the following ddd-ddd-dddd dddddddddd , (ddd)ddddddd, (ddd)ddd-dddd d is thPizza Order: 1234567890 Email Address. SubmitPizza Order: 1234567890 test@test.com SubmitPizza Order: 1234567890 test@test.com@ Email string must be in the format: xxxx@xxxx.xxx, where xxxx is an arbitrary string cPizza Order: 1234567890 @test@test.com Email string must be in the format: xxxx@xxxx.xxx, where xxxx is an arbitrary string cPizza Order: (955)1234567 test@test.com Submit

//comment if you have any doubt.

0 0
Add a comment
Know the answer?
Add Answer to:
Add JavaScript scripts to the pizza order form to validate the formats of the phone number...
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

  • Open the Validate Number Solution.sln file contained in the VB2017\Chap07\Validate Number Solution folder. The interface provides...

    Open the Validate Number Solution.sln file contained in the VB2017\Chap07\Validate Number Solution folder. The interface provides a text box for entering a 9-digit number. The btnValidate_Click procedure should use the algorithm and example shown in Figure 7-56 to validate the user’s entry. The procedure should display a message indicating whether the entry is or is not valid. Code the procedure. Include any other code that will professionalize the interface. Save the solution and then start and test the application. Create...

  • build a phone number from digits entered by your user. Your program will loop until 10...

    build a phone number from digits entered by your user. Your program will loop until 10 valid digits have been entered. It will then use those digits to display the phone number entered using the format: XXXXXXXXXX (or (XXX) XXX – XXXX for extra credit). The program will ask for a digit, it will check to see if the digit is actually between 0 and 9 inclusively. If so, the digit will be stored as the next number in 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