Jump to content
Larry Ullman's Book Forums

Form Submission


Recommended Posts

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

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

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

 Share

×
×
  • Create New...