Jump to content
Larry Ullman's Book Forums
Sign in to follow this  
synergy

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!

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...