javascript - Form validates even when validations fail -
hello need one. seems application still gives output if validation fails. have tried many ways edit codes no avail form still allows submissions , gives output.
i need form able validate upon submission , if there 1 fail validation or error form should not submit , gives output. alerts. need validation. there should alerts if validation fails , form should not submit output. please me this. please see form below. in advance.
<html> <head> <title>hello , javascript</title> <script> function doclear() { document.pizzaform.customer.value = ""; document.pizzaform.address.value = ""; document.pizzaform.city.value = ""; document.pizzaform.state.value = "pa"; document.pizzaform.zip.value = ""; document.pizzaform.phone.value = ""; document.pizzaform.email.value = ""; document.pizzaform.sizes[0].checked = false; document.pizzaform.sizes[1].checked = false; document.pizzaform.sizes[2].checked = false; document.pizzaform.sizes[3].checked = false; document.pizzaform.toppings[0].checked = false; document.pizzaform.toppings[1].checked = false; document.pizzaform.toppings[2].checked = false; document.pizzaform.toppings[3].checked = false; document.pizzaform.toppings[4].checked = false; document.pizzaform.toppings[5].checked = false; document.pizzaform.toppings[6].checked = false; document.pizzaform.toppings[7].checked = false; document.pizzaform.toppings[8].checked = false; return; } function dosubmit() { if (validatetext() == false) if (validateradio() == false) if (validatetops() == false) { return; } function capitalizestring(stringtocapitalize) { var words = stringtocapitalize.split(' '); (var i=0, il=words.length; i<il; i++) { if (words[i].length > 0) { words[i] = words[i].charat(0).touppercase() + words[i].substring(1, words[i].length); } } return words.join(' '); } var toppings = ""; for(i=0;i<document.pizzaform.toppings.length;i++){ if(document.pizzaform.toppings[i].checked) toppings += (i==0?"":",")+document.pizzaform.toppings[i].value; } /*this alerts tells order form complete , list customer information such name address etc on new page.*/ var orderwindow orderwindow = window.open("","","status,height=500,width=500"); orderwindow.focus(); (orderwindow.document) { write("<h1><center>customer order summary</center></h1><p>") write("name:" + capitalizestring(document.pizzaform.customer.value) + "<br>") write("address:" + document.pizzaform.address.value + "<br>") write("city:" + capitalizestring(document.pizzaform.city.value) + "<br>") write("state:" + document.pizzaform.state.value + "<br>") write("zip code:" + document.pizzaform.zip.value + "<br>") write("phone number:" + document.pizzaform.phone.value + "<br>") write("e-mail:" + document.pizzaform.email.value + "<br>") write("pizza size:" + document.pizzaform.sizes.value + "<br>") write("toppings:" + toppings + "<br>") write("<h3><center>thank order.</center></h3><p>") } return; } function validatetext() { if (document.pizzaform.customer.value == "") { alert("please enter name"); document.pizzaform.customer.focus(); } if (document.pizzaform.address.value == "") { alert("please enter address."); document.pizzaform.address.focus(); } if (document.pizzaform.city.value == "") { alert("please enter city."); } if (document.pizzaform.state.value == "") { alert("please enter state."); } if (document.pizzaform.zip.value == "" || isnan( document.pizzaform.zip.value ) || document.pizzaform.zip.value.length != 5 ) { alert("please provide valid zip code."); document.pizzaform.zip.focus() ; } if (!/^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/.test(document.pizzaform.phone.value)){ alert("please provide valid phone number."); document.pizzaform.phone.focus(); } var email = document.pizzaform.email.value; if(!(/^[a-za-z][\w\.-]*[a-za-z0-9]@[a-za-z0-9][\w\.-]*[a-za-z0-9]\.[a-za-z][a-za-z\.]*[a-za-z]$/.test(email))){ alert('please enter valid e-mail address'); document.pizzaform.email.focus() ; return false; } return true; } function validateradio()/*this function validates radio selection*/ { for(i=0;i<document.pizzaform.sizes.length;i++) if(document.pizzaform.sizes[i].checked) return document.pizzaform.sizes[i].value; alert("please choose size of order."); return false; } function validatetops()/*this function validates toppings.*/ { if (document.pizzaform.toppings[0].checked == false && document.pizzaform.toppings[1].checked == false && document.pizzaform.toppings[2].checked == false && document.pizzaform.toppings[3].checked == false && document.pizzaform.toppings[4].checked == false && document.pizzaform.toppings[5].checked == false && document.pizzaform.toppings[6].checked == false && document.pizzaform.toppings[7].checked == false && document.pizzaform.toppings[8].checked == false) { alert("please select topping of choice."); return false; } return true; } </script> </head> <body bgcolor="#efefcf"> <div align="center"> <pre><h2>pizza menu prices today's selection</h2></pre> <iframe name="left" src="prices.html" width="40%" height="380" scrolling="no" frameborder="0"></iframe> <iframe name="right" src="images.html" width="35%" height="380" scrolling="no" frameborder="0"></iframe> <form name ="pizzaform"> <h1>the javascript pizza parlor</h> <p> <h4> step 1: enter name, address, city, state, phone, zip, , email:</h4> <font face="courier new"> name: <input name="customer" size="50" type="text"><br> address: <input name="address" size="50" type="text"><br> city: <input name="city" size="16"type="text"> state:<select name="state" id="selection"> <option value="select state"></option> <option>pa</option> <option>nj</option> <option>ny</option> <option>de</option> </select> zip:<input name="zip" size="8"type="text"><br> phone: <input name="phone" size="50"type="text"><br> email: <input name="email" size="50"type="text"><br> </font> </p> <p> <h4> step 2: select size of pizza want:</h4> <font face="courier new"> <input name="sizes" type="radio" value="small">small <input name="sizes" type="radio" value="medium">medium <input name="sizes" type="radio" value="large">large <input name="sizes" type="radio" value="jumbo">jumbo<br> </font> </p> <p> <h4> step 3: select pizza toppings want:</h4> <font face="courier new"> <input name="toppings" type="checkbox" value="pepperoni">pepperoni <input name="toppings" type="checkbox" value="canadian bacon">canadian bacon <input name="toppings" type="checkbox" value="sausage">sausage<br> <input name="toppings" type="checkbox" value="mushrooms">mushrooms <input name="toppings" type="checkbox" value="pineapple">pineapple <input name="toppings" type="checkbox" value="black olives">black olives<br> <input name="toppings" type="checkbox" value="green peppers">green peppers <input name="toppings" type="checkbox" value="extra cheese">extra cheese <input name="toppings" type="checkbox" value="plain">plain </font> </p> <input type="button" value="submit order" onclick="dosubmit()"> <input type="button" value="clear entries" onclick="doclear()"> </form> </div> </body> </html>
the problem these 3 lines:
if (validatetext() == false) if (validateradio() == false) if (validatetops() == false) { return; } which mean:
if (validatetext() == false) if (validateradio() == false) if (validatetops() == false) { return; } so if of validations fail exit function early, if 1 of them passes form submit. change to:
if (validatetext() == false || validateradio() == false || validatetops() == false) { return; }
Comments
Post a Comment