synergy Posted October 22, 2012 Share Posted October 22, 2012 Hi, Re-creating some form validation code from scratch for practice (basically the stuff from the end of the Forms chapter) and for some reason or another, I can't prevent the form from submitting. The errors pop up briefly (if I didn't fill out an input or left it blank), but quickly disappear again due to the fact the form gets submitted (I can tell because a hash tag appears in the URL after submission). I'm thinking it has something to do with preventDefault(), but I just can't find any errors with it and I've been looking at it for hours. Any idea why? Here is the code I've written for practice: THE HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Playing with Forms 2</title> <link rel="stylesheet" href="css/manoForm2.css" media="screen"> </head> <body> <form action="#" method="post" id="form" novalidate> <fieldset><legend>Register, and be cool.</legend> <div class="one"><label for="firstName">First Name</label><input type="text" name="firstName" id="firstName" required></div> <div class="one"><label for="lastName">Last Name</label><input type="text" name="lastName" id="lastName" required></div> <div class="one"><label for="email">Email</label><input type="email" name="email" id="email" required></div> <div><label for="food">Choose your food</label><select name="food" id="food"> <option value="">Pick a food</option> <option value="Meat">Bacon</option> <option value="Other">More Bacon</option> </select></div> <div class="two"><input type="checkbox" name="checkbox" id="checkbox">I agree to some stuff.</div> <div class="two"><input type="submit" value="Register" name="submit" id="submit"></div> </fieldset> </form> <script src="js/registernew.js"></script> <script src="js/error2.js"></script> <script src="js/utilities2.js"></script> </body> </html> THE Javascript From registernew.js: function validateForm(e) { 'use strict'; if (typeof e == 'undefined') e = window.event; var firstName = U.$('firstName'); var lastName = U.$('lastName'); var email = U.$('email'); var foodType = U.$('food'); var error = false; if(/^[A-Za-z]{2,20}$/.test(firstName.value)){ removeErrorMessage(firstName.id); } else { addErrorMessage(firstName.id, 'First name PLZ'); error = true; } if(/^[A-Za-z]{2,20}$/.test(lastName.value)){ removeErrorMessage(lastName.id); } else { addErrorMessage(lastName.id, 'Last name PLZ'); error = true; } if(/^[\w\.-]+@{1}[\w\.-]\.{1}[a-z]{2,6}$/.test(email.value)){ removeErrorMessage(email.id); } else { addErrorMessage(email.id, 'Enter emailz PLZ'); error = true; } if(foodtype.selectedIndex != 0) { removeErrorMessage(foodtype.id); } else { addErrorMessage(foodtype.id, 'Select something PLZ'); error = true; } if(error){ if(e.preventDefault){ e.preventDefault(); } else { e.returnValue = false; } } }//end of validateForm function function toggleSubmit(){ 'use strict'; var checkbox = U.$('checkbox'); var submit = U.$('submit'); if(checkbox.checked){ submit.disabled = false; } else { submit.disabled = true; } }//end of toggleSubmit function window.onload = function() { 'use strict'; submit.disabled = true; U.addEvent(U.$('form'), 'submit', validateForm); U.addEvent(U.$('checkbox'), 'change', toggleSubmit); }//end of onload function From error2.js: function addErrorMessage(id, msg) { 'use strict'; var elem = document.getElementById(id); var newId = id + 'Error'; var span = document.getElementById(newId); if(span) { span.firstChild.value = msg; } else { span = document.createElement('span'); span.id = newId; span.className = 'error'; span.appendChild(document.createTextNode(msg)); elem.parentNode.appendChild(span); elem.previousSibling.className = 'error'; } }//end of addErrorMessage function removeErrorMessage(id){ 'use strict'; var elem = document.getElementById(id + 'Error'); if(elem){ elem.previousSibling.previousSibling.className = null; elem.parentNode.removeChild(elem); } }//end of removeErrorMessage From utlities2.js: var U = { $: function(id) { 'use strict'; if(id && typeof id === 'string') { return document.getElementById(id); } }, addEvent: function(obj, type, fn) { 'use strict'; if(obj && obj.addEventListener) { obj.addEventListener(type, fn, false); } else if(obj && obj.attachEvent) { obj.attachEvent('on' + type, fn); } }, removeEvent: function(obj, type, fn) { 'use strict'; if(obj && obj.removeEventListener) { obj.removeEventListener(type, fn, false); } else if(obj && obj.detachEvent) { obj.detachEvent('on' + type, fn); } } };//end of U object I am omitting the CSS because I barely wrote any for this form except for floating the .one elements and giving the label a width. If anyone can see what the error is, I'd appreciate it. Again, the problem is that the form is not being prevented from being submitted, and that the error messages flicker because of this (at least I think that's why). Thanks! Link to comment Share on other sites More sharing options...
Larry Posted October 22, 2012 Share Posted October 22, 2012 It may not be the cause of the problem, but you're loading your JS files in the wrong order. Utilities should be loaded first. Also, in your onload function, you have submit.disabled = true, but there's no reference made to submit. Link to comment Share on other sites More sharing options...
synergy Posted October 23, 2012 Author Share Posted October 23, 2012 Hi Larry, Fixed those and it still doesn't appear to be working. I'll keep looking at it, it's really puzzling. Link to comment Share on other sites More sharing options...
synergy Posted October 23, 2012 Author Share Posted October 23, 2012 Hi again Larry, I figured it out! Hours and hours of debugging came down to a typo mistake in the if-else segment of the select element. I noticed that it wasn't displaying an error even if I didn't pick anything. I defined: var foodType = U.$('food'); And wrote later on: if(foodtype.selectedIndex != 0) { removeErrorMessage(foodtype.id); } else { addErrorMessage(foodtype.id, 'Select something PLZ'); error = true; } ...I forgot to capitalize the 't' in 'foodtype'. So that fixed that. However, my question now is, why did that throw off the entire function (ie. why did the function still not prevent the default behavior)? There were still errors in the form (I left it blank when I tested it), so the variable 'error' still would have been 'true'. Any ideas sir? Thanks, Thomas Link to comment Share on other sites More sharing options...
Recommended Posts