javascript - Form Validation? -
i'm trying make check form validation. shouldn't let form submit unless filled in, should total if works. i'm new , have no idea going on, showing blue box @ top of screen default, , submitting/accepting regardless of form being filled out or not. html:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>hands-on project 6 - order</title> <link rel="stylesheet" href="styles.css"> <script src="script.js"></script> </head> <body> <section> <article> <h2>pizza order form</h2> <div id="errormessage"> </div> <form action="results.html" id="orderform"> <input type="hidden" name="hidden" id="hidden"> <fieldset> <legend>delivery information</legend> <label for="nameinput">name</label> <input type="text" id="nameinput" name="name"> <label for="addrinput">street address</label> <input type="text" id="addrinput" name="address"> <label for="cityinput">city</label> <input type="text" id="cityinput" name="city"> <label for="emailinput">email</label> <input type="email" id="emailinput" name="email"> <label for="phoneinput">phone</label> <input type="tel" id="phoneinput" name="phone"> </fieldset> <fieldset> <legend>order</legend> <p> <span class="nonlabel">what type of crust:</span> <br> <input type="radio" name="crust" id="thin" value="1"> <label for="thin">thin crust</label> <input type="radio" name="crust" id="original" value="0"> <label for="original">original crust</label> <input type="radio" name="crust" id="thick" value="3"> <label for="thick">deep dish</label> </p> <label for="size" class="nonlabel">what size pizza:</label> <select id="size" name="size"> <option value=""> </option> <option value="small">small</option> <option value="medium">medium</option> <option value="large">large</option> <option value="xl">extra large</option> </select> <p> <span class="nonlabel">what topping(s):</span> <br> <input type="checkbox" id="pepperoni" name="toppings" value="pepperoni"> <label for="pepperoni">pepperoni</label> <input type="checkbox" id="sausage" name="toppings" value="sausage"> <label for="sausage">sausage</label> <input type="checkbox" id="bacon" name="toppings" value="bacon"> <label for="bacon">bacon</label> <br> <input type="checkbox" id="greenpep" name="toppings" value="green peppers"> <label for="greenpep">green peppers</label> <input type="checkbox" id="onion" name="toppings" value="onions"> <label for="onion">onions</label> <input type="checkbox" id="xcheese" name="toppings" value="extra cheese"> <label for="xcheese">extra cheese</label> </p> <p> <label for="instructions" id="instrlabel">special instructions:</label> </p> <textarea id="instructions" name="instructions" rows="3" cols="60" placeholder="special requests, delivery details"></textarea> </fieldset> <fieldset id="submitbutton"> <input type="submit" id="submitbtn" value="add cart"> </fieldset> </form> </article> </section> <script> document.getelementbyid("submitbtn ").addeventlistener("submit", validateform(evt)); </script> </body> </html> javascript:
// validate required fields function validateform(evt){ if(evt.preventdefault){ evt.preventdefault(); } else { evt.returnvalue = false; } formvalidity = true; validateformcontrols(); } function validateformcontrols(){ var inputelements = document.queryselectorall("fieldset:first-of-type input"); var errordiv = document.getelementbyid("errormessage"); var crustboxes = document.getelementsbyname("crust"); var fieldsetvalidity = true; var elementcount = inputelements.length; var currentelement; try { for(var = 0; < elementcount; i++){ currentelement = inputelements[i]; if(currentelement.value === ""){ currentelement.style.border = "3px solid #0b907a"; currentelement.style.backgroundcolor = "#ffc58a"; fieldsetvalidity = false; } else { currentelement.style.border = ""; currentelement.style.backgroundcolor = ""; } } currentelement.queryselectorall("select")[0]; if (currentelement.selectedindex === 0){ currentelement.style.border = "3px solid #0b907a"; currentelement.style.backgroundcolor = "#ffc58a"; fieldsetvalidity = false; } else{ currentelement.style.border = ""; currentelement.style.backgroundcolor = ""; } if (!crustboxes[0].checked && !crustboxes[1].checked && !crustboxes[2].checked){ crustboxes[0].style.outline = "3px solid #0b907a"; crustboxes[1].style.outline = "3px solid #0b907a"; crustboxes[2].style.outline = "3px solid #0b907a"; } else { crustboxes[0].style.outline = ""; crustboxes[1].style.outline = ""; crustboxes[2].style.outline = ""; } if (fieldsetvalidity === false){ throw "please complete required fields."; } else { errordiv.style.display = "none"; errordiv.innerhtm = ""; } catch(msg){ errordiv.style.display = "block"; errordiv.innerhtml = msg; formvalidity = false; } } } function ordertotal(){ var itemtotal = 5; var crusts = document.getelementsbyname("crust"); var toppings = document.getelementsbyname("goodnight"); var sizes = document.queryselectorall("select")[0]; if (sizes.selectedindex > 0) { itemtotal += ((sizes.selectedindex * 1) * 2); } (var i=0; < toppings.length; i++){ if (toppings[i].checked) { itemtotal += 1; } } (var i=0; < crusts.length; i++){ if (crusts[i].checked) { itemtotal += (crusts[i].value * 1); } } alert ("your order total $" + itemtotal); document.getelementbyid("hidden").value = itemtotal; }
wrong id parameter
document.getelementbyid("submitbutton ").addeventlistener("submit", validateform(evt));must
document.getelementbyid("submitbtn").addeventlistener("submit",validateform(evt));
Comments
Post a Comment