ZuoTi.Pro
Question

Create JavaScript to validate the form The form accepts some personal information, item quanitites, and a...

Create JavaScript to validate the form

The form accepts some personal information, item quanitites, and a shipping method. Your task is to ensure that the user inputs the correct data. In particular:

The firstName, lastName, address, city, province, and postalCode fields must all have a value.

The postalCode field must be 6 digits long

The quantity fields for the widgits must contain a number greater than or equal to zero

At least one item must be ordered

The user must be notified of the errors in the form. I am going to allow for some creativity on your part on how this is to be done. The only requirement is that it is clear to the user which fields have errors, and what the errors are.

Finally, if the form submission is valid, display an alert to the user confirming the successful submission of their form, and inform them of the total price. If there are errors in the form, it should not submit.

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

Homework Answers

Answer #1

Code for Form validation:

<html>

<head>

<title>Shopping Form</title>

<script type="text/javascript">

//local variable

var itemprice;

var finalprice;

var itemname;

//function validation for validation and calculate value

function validation()

{

//store text box value into variable

var fname=document.getElementById("FirstName").value;

var lname=document.getElementById("LastName").value;

var address=document.getElementById("Address").value;

var city=document.getElementById("City").value;

var province=document.getElementById("Province").value;

var postalcode=document.getElementById("PostalCode").value;

var items = document.getElementById('Items').value;

var quanitites=document.getElementById("Quanitites").value;

var shipping_method = document.getElementById('Shipping_method').value;

//validation for null value in text box

if (fname=="" || lname=="" || address=="" || city=="" || province=="" || postalcode=="" || quanitites=="")

{

alert("pleas fill appropriate fild");

}

//validation for shiping metod is not selected

if(shipping_method==0)

{

alert("Please select shipping method");

}

else

{

//if condition for choose the item and calculate the value

if(items==1)

{

//store price and item name in local variable for display value

itemprice=10000;

itemname="Mi TV 4A Pro 49-inch";

}

else if(items==2)

{

itemprice=9000;

itemname="LG Smart TV 55-inch";

}

else if(items==3)

{

itemprice=11000;

itemname="Sony Bravia A8F TV 55-inch";

}

else if(items==4)

{

itemprice=102000;

itemname="Xiaomi Mi TV 4";

}

else

{

alert("choose item")

}

//confirm box if user press button to submit or not

if(confirm("press button"))

{

finalprice=itemprice*eval(quanitites);

document.write("you product is "+itemname);

document.write("<br>your Quanitites is "+quanitites);

document.write("<br>your final price of product "+finalprice);

}

else

{

alert("you press cancel button");

}

}

}

</script>

</head>

<body>

<form action="" id="myform" name="myform">

<p>

<label for='FirstName'>First Name:</label>

<input type="text" id="FirstName" name="FirstName" />

</p>

<p>

<label for='LastName'>Last Name:</label>

<input type="text" id="LastName" name="LastName" />

</p>

<p>

<label for='Address'>Address:</label>

<textarea cols="20" rows="5" id="Address" name="Address"></textarea>

</p>

<p>

<label for='City'>City:</label>

<input type="text" id="City" name="City" />

</p>

<p>

<label for='Province'>Province:</label>

<input type="text" id="Province" name="Province" />

</p>

<p>

<label for='PostalCode '>PostalCode :</label>

<input type="text" id="PostalCode" name="PostalCode" maxlength=6 />

</p>

<p>

<label for='Items'>Items Name:</label>

<select id="Items" name="Items">

<option value="0" selected="selected">[choose yours]</option>

<option value="1">Mi TV 4A Pro 49-inch</option>

<option value="2">LG Smart TV 55-inch</option>

<option value="3">Sony Bravia A8F TV 55-inch</option>

<option value="4">Xiaomi Mi TV 4</option>

</select>

</p>

<p>

<label for='Quanitites'>Quanitites:</label>

<input type="text" id="Quanitites" name="Quanitites" />

</p>

<p>

<label for='Shipping_method'>Shipping method:</label>

<select id="Shipping_method" name="Shipping_method">

<option value="0" selected="selected">[choose yours]</option>

<option value="1">First Class</option>

<option value="2">Two-Day</option>

<option value="3">Fedex Overnight</option>

</select>

</p>

<p>

<input type="submit" name="submit" value="Submit" onclick="validation();">

</p>

</form>

</body>

CNUsersjighnesh tapariya\Desktoplformvalidation.htm-Notepad- File Edit Search Yew Encoding Language Settings Macro Run Plugins岦indow formvalidationhtm 1 무mL> 2申ad> 3 <title Shopping Form</title> 4<script type-text/javascript> Iocal variable var Itempr1ce; 7var finalprice; 8 var itemname; 9 //function validation forvalidation and calculate value 10function validation () 12//store text box value into variable 13 var fname document.getElementById(FirstName) . value; 14 var lname-document.getElementById (LastName) . value; 15 var address-document.getElementById(Address) .value; 16 var cit yedocument.getElementById(City) .value; Hyper Text Markup Language file length: 3857 lines: 139 Ln: 6 Col: 19 Sel: 010 DoslWindows UTF-8 w/o BOM INS O Type here to search ENG 09:03 INTL 03-11-2018

Output:

Thank you if you have any query regarding above answer please ask me in comment box.

if you like my work appreciate with thums up.

Thank You.

0 0
Add a comment
Answer #1

Code for Form validation:

<html>

<head>

<title>Shopping Form</title>

<script type="text/javascript">

//local variable

var itemprice;

var finalprice;

var itemname;

//function validation for validation and calculate value

function validation()

{

//store text box value into variable

var fname=document.getElementById("FirstName").value;

var lname=document.getElementById("LastName").value;

var address=document.getElementById("Address").value;

var city=document.getElementById("City").value;

var province=document.getElementById("Province").value;

var postalcode=document.getElementById("PostalCode").value;

var items = document.getElementById('Items').value;

var quanitites=document.getElementById("Quanitites").value;

var shipping_method = document.getElementById('Shipping_method').value;

//validation for null value in text box

if (fname=="" || lname=="" || address=="" || city=="" || province=="" || postalcode=="" || quanitites=="")

{

alert("pleas fill appropriate fild");

}

//validation for shiping metod is not selected

if(shipping_method==0)

{

alert("Please select shipping method");

}

else

{

//if condition for choose the item and calculate the value

if(items==1)

{

//store price and item name in local variable for display value

itemprice=10000;

itemname="Mi TV 4A Pro 49-inch";

}

else if(items==2)

{

itemprice=9000;

itemname="LG Smart TV 55-inch";

}

else if(items==3)

{

itemprice=11000;

itemname="Sony Bravia A8F TV 55-inch";

}

else if(items==4)

{

itemprice=102000;

itemname="Xiaomi Mi TV 4";

}

else

{

alert("choose item")

}

//confirm box if user press button to submit or not

if(confirm("press button"))

{

finalprice=itemprice*eval(quanitites);

document.write("you product is "+itemname);

document.write("<br>your Quanitites is "+quanitites);

document.write("<br>your final price of product "+finalprice);

}

else

{

alert("you press cancel button");

}

}

}

</script>

</head>

<body>

<form action="" id="myform" name="myform">

<p>

<label for='FirstName'>First Name:</label>

<input type="text" id="FirstName" name="FirstName" />

</p>

<p>

<label for='LastName'>Last Name:</label>

<input type="text" id="LastName" name="LastName" />

</p>

<p>

<label for='Address'>Address:</label>

<textarea cols="20" rows="5" id="Address" name="Address"></textarea>

</p>

<p>

<label for='City'>City:</label>

<input type="text" id="City" name="City" />

</p>

<p>

<label for='Province'>Province:</label>

<input type="text" id="Province" name="Province" />

</p>

<p>

<label for='PostalCode '>PostalCode :</label>

<input type="text" id="PostalCode" name="PostalCode" maxlength=6 />

</p>

<p>

<label for='Items'>Items Name:</label>

<select id="Items" name="Items">

<option value="0" selected="selected">[choose yours]</option>

<option value="1">Mi TV 4A Pro 49-inch</option>

<option value="2">LG Smart TV 55-inch</option>

<option value="3">Sony Bravia A8F TV 55-inch</option>

<option value="4">Xiaomi Mi TV 4</option>

</select>

</p>

<p>

<label for='Quanitites'>Quanitites:</label>

<input type="text" id="Quanitites" name="Quanitites" />

</p>

<p>

<label for='Shipping_method'>Shipping method:</label>

<select id="Shipping_method" name="Shipping_method">

<option value="0" selected="selected">[choose yours]</option>

<option value="1">First Class</option>

<option value="2">Two-Day</option>

<option value="3">Fedex Overnight</option>

</select>

</p>

<p>

<input type="submit" name="submit" value="Submit" onclick="validation();">

</p>

</form>

</body>

CNUsersjighnesh tapariya\Desktoplformvalidation.htm-Notepad- File Edit Search Yew Encoding Language Settings Macro Run Plugins岦indow formvalidationhtm 1 무mL> 2申ad> 3 <title Shopping Form</title> 4<script type-text/javascript> Iocal variable var Itempr1ce; 7var finalprice; 8 var itemname; 9 //function validation forvalidation and calculate value 10function validation () 12//store text box value into variable 13 var fname document.getElementById(FirstName) . value; 14 var lname-document.getElementById (LastName) . value; 15 var address-document.getElementById(Address) .value; 16 var cit yedocument.getElementById(City) .value; Hyper Text Markup Language file length: 3857 lines: 139 Ln: 6 Col: 19 Sel: 010 DoslWindows UTF-8 w/o BOM INS O Type here to search ENG 09:03 INTL 03-11-2018

Output:

Thank you if you have any query regarding above answer please ask me in comment box.

if you like my work appreciate with thums up.

Thank You.

0 0
Add a comment
Know the answer?
Add Answer to:
Create JavaScript to validate the form The form accepts some personal information, item quanitites, and a...
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

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

  • Develop an HTML form that could be used to enter your book information (Books, Authors, and...

    Develop an HTML form that could be used to enter your book information (Books, Authors, and Publishers) start with the HTML/JavaScript template provided Expand upon it! What field information would you enter into a system? Have your form use more then just character text fields ... radio buttons, pick lists, and other elements make your form easier to use and you don't need to do lots of JavaScript checks. What fields would be mandatory ... which could be left blank?...

  • 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 =...

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