Matthew Herren Posted October 16, 2009 Share Posted October 16, 2009 My form validation is not working. I re-wrote it and i'm getting nothing, I cant figure out if the script should go in the <head> tags or after the form. Here's my script. <script language="JavaScript" type="text/javascript"> function validateFormOnSubmit(auto1) { var reason = ""; reason += validateUsername(auto1.name); reason += validatePassword(auto1.password); reason += validateEmail(auto1.email); reason += validatePhone(auto1.phone); reason += validateEmpty(theForm.make); reason += validateEmpty(theForm.model); reason += validateEmpty(theForm.color); reason += validateEmpty(theForm.plate); if (reason != "") { alert("Some fields need correction:\n" + reason); return false; } return true; } function validateForm(formObj) { if (!formObj.name.value || !formObj.mi.value || !formObj.last.value) { //Validation failed alert('Name, Last and Middle Initial ar all required!'); return false; } //Validation passed return true; } function validateForm(formObj) { if (!formObj.name.value || !formObj.last.value || !formObj.email.value) { //Validation failed alert('Name, Last and Middle Initiall are required.'); return false; } //Validation passed return true; } function validateEmpty(fld) { var error = ""; if (fld.value.length == 0) { fld.style.background = 'Yellow'; error = "The required field has not been filled in.\n" } else { fld.style.background = 'White'; } return error; } function validatePassword(password) { var error = ""; var illegalChars = /[\W_]/; // allow only letters and numbers if (fld.value == "") { fld.style.background = 'Yellow'; error = "You didn't enter a password.\n"; } else if ((fld.value.length < 7) || (fld.value.length > 15)) { error = "Your password must be at least 7 characters and no more than 15 \n"; fld.style.background = 'Yellow'; } else if (illegalChars.test(fld.value)) { error = "The password contains illegal characters.\n"; fld.style.background = 'Yellow'; } else if (!((fld.value.search(/(a-z)+/)) && (fld.value.search(/(0-9)+/)))) { error = "The password must contain at least one numeral.\n"; fld.style.background = 'Yellow'; } else { fld.style.background = 'White'; } return error; } function validate() { if (document.registration_form.password.value != document.registration_form.password_confirm.value) { alert("The two passwords are not identical! "+ "Please enter the same password again for confirmation"); return false; } return true; } function trim(s) { return s.replace(/^\s+|\s+$/, ''); } function validateEmail(fld) { var error=""; var tfld = trim(fld.value); // value of field with whitespace trimmed off var emailFilter = /^[^@]+@[^@.]+\.[^@]*\w\w$/ ; var illegalChars= /[\(\)\<\>\,\;\:\\\"\[\]]/ ; if (fld.value == "") { fld.style.background = 'Yellow'; error = "You didn't enter an email address.\n"; } else if (!emailFilter.test(tfld)) { //test email for illegal characters fld.style.background = 'Yellow'; error = "Please enter a valid email address.\n"; } else if (fld.value.match(illegalChars)) { fld.style.background = 'Yellow'; error = "The email address contains illegal characters.\n"; } else { fld.style.background = 'White'; } return error; } </script> My Form <form name="auto1" method="post" class="beccas" onsubmit="return validateFormOnSubmit(this)" action="confirm.php" > <ul > <li><div id='auto1_errorloc' class='error_messages'><span style color="#ff0000">†</span> Required Fields.</li> <li id="li_5" > <label class="description" for="element_5">Name† </label> <span> <input id="element_5_1" name= "name" class="element text" maxlength="255" size="14" value=""/> <label>First</label> </span> <span> <input id="element_5_2" name= "last" class="element text" maxlength="255" size="14" value=""/> <label>Last</label> </span> <span> <input id="last" name= "mi" class="element text" maxlength="1" size="2" value=""/> <label>M.I.</label> </span> </li> <li id="li_9" > <label class="description" for="element_9">Password†</label> <span> <input id="element_9_1" name="password" class="element text large" size="9" maxlength="9" size="15" value="" type="password"> </span> <span> <input id="element_9_1" name="password_confirm" class="element text large" size="9" maxlength="9" size="15" value="" type="password"> </span> </li> <li id="li_1" > <label class="description" for="element_1">Address† </label> <div> <input id="element_1_1" name="add" class="element text large" value="" type="text"> <label for="element_1_1">Street Address</label> </div> <div> <input id="element_1_2" name="add2" class="element text large" value="" type="text"> <label for="element_1_2">Address Line 2</label> </div> <div class="left"> <input id="element_1_3" name="city" class="element text medium" value="" type="text"> <label for="element_1_3">City</label> </div> <div class="right"> <input id="element_1_4" name="state" class="element text medium" maxlength="2" size="2" value="" type="text"> <label for="element_1_4">State</label> </div> <div class="left"> <input id="element_1_5" name="zip" class="element text medium" maxlength="5" size="5" value="" type="text"> <label for="element_1_5">Zip Code</label> </div> </li> <li id="li_8" > <label class="description" for="element_8">E-mail†</label> <span> <input id="element_8_1" name="email" class="element text large" size="100" maxlength="25" size="15" value="" type="email"> </span> </li><li id="li_2" > <label class="description" for="element_2">Home Phone</label> <span> <input id="element_2_1" name="hp" class="element text" size="13" maxlength="13" value="(502)" type="text"> <label for="element_2_1">(###)###-####</label> </span> </li> <li id="li_4" > <label class="description" for="element_4">Cell Phone</label> <span> <input id="element_4_1" name="cp" class="element text" size="13" maxlength="13" value="(502)" type="text"> <label for="element_4_1">(###)###-####</label> </span> </li> <li id="li_3" > <label class="description" for="element_3">Work Phone</label> <span> <input id="element_3_1" name="work" class="element text" size="13" maxlength="13" value="(502) "type="text"> <label for="element_3_1">(###)###-####</label> </span> </li> <li id="li_6" > <label class="description" for="element_6">How many vehicles† </label> <label class="description" for="element_6">Vehicle 1†</label> <div> <input id="element_1_1" name="make" class="element text large" size="10" maxlength="20" value="" type="text"> <label for="element_1_1">Make</label> </div> <div> <input id="element_1_2" name="model" class="element text large" size="10" maxlength="20" value="" type="text"> <label for="element_1_2">Model</label> </div> <div class="left"> <input id="element_1_3" name="color" class="element text medium" size="10" maxlength="10" value="" type="text"> <label for="element_1_3">Color</label> </div> <div class="right"> <input id="element_1_4" name="plate" class="element text medium" maxlength="7" size="7" value="" type="text"> <label for="element_1_4">Plate</label> </div> <label class="description" for="element_6">Vehicle 2†</label> <div> <input id="element_1_1" name="make2" class="element text large" size="10" maxlength="20" value="" type="text"> <label for="element_1_1">Make</label> </div> <div> <input id="element_1_2" name="model2" class="element text large" size="10" maxlength="20" value="" type="text"> <label for="element_1_2">Model</label> </div> <div class="left"> <input id="element_1_3" name="color2" class="element text medium" size="10" maxlength="10" value="" type="text"> <label for="element_1_3">Color</label> </div> <div class="right"> <input id="element_1_4" name="plate2" class="element text medium" maxlength="7" size="7" value="" type="text"> <label for="element_1_4">Plate</label> </div> <label class="description" for="element_6">Vehicle 3†</label> <div> <input id="element_1_1" name="make3" class="element text large" size="10" maxlength="20" value="" type="text"> <label for="element_1_1">Make</label> </div> <div> <input id="element_1_2" name="model3" class="element text large" size="10" maxlength="20" value="" type="text"> <label for="element_1_2">Model</label> </div> <div class="left"> <input id="element_1_3" name="color3" class="element text medium" size="10" maxlength="10" value="" type="text"> <label for="element_1_3">Color</label> </div> <div class="right"> <input id="element_1_4" name="plate3" class="element text medium" maxlength="7" size="7" value="" type="text"> <label for="element_1_4">Plate</label> </div> </div> </li> <li class="buttons"> <button type="reset" value="Reset">Reset</button> <button type="submit" value="Submit">Submit</button> </li> </ul> </form> Quote Link to comment Share on other sites More sharing options...
Psycho Posted October 16, 2009 Share Posted October 16, 2009 You need to clean up your code and keep it organized. In the functino that is called on submit validateFormOnSubmit(), the second line of code is calling another function: validateUsername(). That function does not exist, so the javascript errors out and the form is sent. Also, you have the function validateForm() defined twice. Overall there is a lot of unnecessary code in there. You shoudl start by implementing validation for one field. Once that works do the next field, and so on. There are other problems as well. In the function validatePassword() you are referencing an object called 'fld', but it is not defined function validatePassword(password) { var error = ""; var illegalChars = /[\W_]/; // allow only letters and numbers if (fld.value == "") { Quote Link to comment Share on other sites More sharing options...
Matthew Herren Posted October 16, 2009 Author Share Posted October 16, 2009 Ok thanks. I'm still new to it so sorry. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.