Javascript submit button

window.onload = awesome;

//declare globals
var theForm;

function awesome(){



animals();


//onclick for submit button
document.querySelector("#btnSubmit").onclick = processForm;


//onblur functions for text fields
document.querySelector("#charName").onblur = checkName;
document.querySelector("#email").onblur = checkEmail;

//get the whole form
theForm = document.querySelector("#yourChar");



}
//function that processes the information in the form
function processForm(){


//set an error message variable
var msg = "";

var beer = true;
var glass = new Array();
glass.push(checkName());
glass.push(checkEmail());
for (var i = 0; i < glass.length; i++){
if(glass[i] == false){beer=false};


if(beer = true){}else{
return false;}

}

//validate the name!
//call the function that handles name validation (it will return true if there
//was an error)
msg = checkName();

//validate the email!
msg = checkEmail();


return false;

}



//check the name field
function checkName(){
//rules: cannot be less than 2 characters or more than 50
// cannot have numbers
var namefield = document.querySelector("#charName");

var msg="";
var spaces=false;
var numbers=false;
var counter=0;
var words=false;
var beer=true;


var name = theForm.charName.value; //loop through the value of the entire field, looking for numbers and spaces 11 //trim removes leading and trailing spaces name = trim(name);

//loop through the value of the entire field, looking for numbers and spaces
//also count the number of characters between spaces
for(var q=0;q<namefield.value.length;q++){
//if a space is found (after trimming) set the spaces variable to true
if(namefield.value.substring(q,q+1)==" "){
spaces = true;
//since we've found a space, there should be more than one word (provided you have used the trim function)
if(counter<2){
//if the counter is less than 2, then the word that came before the space has less than 2 characters in it
words = true;
}
//reset the counter (-1 so when we count up below it starts again at 0)
counter = -1;
}else if(isNaN(namefield.value.substring(q,q+1))==false){
//isNaN returns false if you find a number
numbers = true;
}
//for each character, count up by 1
counter += 1;
}
//after the loop, check the values of the variables
if(numbers == true){
msg+= "No Numbers!";
}
if(spaces == false){
msg+= "More than one word please!\n";
}
if(words == true){
msg += "Words must have more than one character!\n";
}
//|| (double pipeline) is 'or'
if(name.length < 2 || name.length > 50){
msg += "Name must be between 2 and 50 characters. ";

}


//check for an error message
if(msg != ""){
theForm.charName.parentNode.childNodes[5].innerHTML = '<span class="error">' + msg + '</span>';
//have the form return true for the play button
return true;
}else{
theForm.charName.parentNode.childNodes[5].innerHTML = '<span class="correct">A good, strong name.</span>';
}

return beer;
}

//check the email
function checkEmail(){
//rules: must have @ symbol, must have . after @
// only one @ symbol, at least one .
// the last . must be at least two characters from the end
// the @ cannot be the first character
var email = theForm.email.value;
//get the positions of various things in the email
var firstAt = email.indexOf("@");
var lastAt = email.lastIndexOf("@");
var firstDot = email.indexOf(".");
var lastDot = email.lastIndexOf(".");
var wrongEmail = false;
var beer =true;


//check for @ symbol (can't be first, must be only one)
if(firstAt == 0 || firstAt == -1 || firstAt != lastAt){
//firstAt == 0: @ is the first character
//firstAt == -1: no @ symbol found
//firstAt != lastAt: more than one @
wrongEmail = true;
}

//check for . symbol (must be at least 1, 1 must come after last @,
//must be at least 2 characters after last .
if(firstDot == -1 || lastDot < lastAt || (lastDot >= email.length-2) ){
//firstDot == -1: no . found
//lastDot < lastAt: no . after @
//lastDot >= email.length-2: less than 2 characters after last dot
wrongEmail = true;
}

//check for email error found
if(wrongEmail == true){
theForm.email.parentNode.childNodes[5].innerHTML = '<span class="error">Please enter a valid email address.</span>';
return true;
}else{
theForm.email.parentNode.childNodes[5].innerHTML = '<span class="correct">What a lovely email.</span>';
return false;
}
return beer;
}




Trting to get my form to submit once user enters in correct info but when i click submit it does nothin.

what am I missing??

Thanks

hard to tell without the form.

<div id="content-wrapper">
<form name="yourChar" id="yourChar" action="http://faculty.edumedia.ca/jarvisa/forms/valid.php" method="get">

<div class="box">
<label for="charName">Name:</label>
<input type="text" id="charName" class="charField txt" name="charName" />
<div class="fieldInfo">
Please enter your name.
</div>
</div>
<br />
<div class="box2">
<label for="email">E-mail:</label>
<input type="text" id="email" class="email txt" name="email" />
<div class="fieldInfo">
Please enter your email.
</div>
</div>
<div class="formbox">
<input type="submit" id="btnSubmit" name="btnSubmit" class="button" value="Submit" />
</div>
</form>
</div>
</div>
</div>
</body>
</html>

on first glance I see nothing that should prevent the form from submitting. do you have a live page?

Right here:

if(beer = true){}else{
return false;}

That code *ASSIGNS* true to beer. You needed to use == there. Not =.

But more simply:

if ( ! beer ) return false;


***********

The real culprit is simple.

The end of your processForm() function does this:

return false;

You never ever return true, so the form can NEVER be submitted.

**********

Your validation is (sorry to say) terrible. Form validation has been covered many many many times in this forum. Search the forum to find some *GOOD* validation functions. Especially for email.

I put an another = sign where u said and i changed false to true. Yah I gte that when you change false to true it submits. But if you press submit as soon as you load the page it goes to the validation page it doesn't allow the user to enter in any information and it shouldn't submit because of errors.

http://imd.edumedia.ca/camp0627/mtm4015/makeup/gallery.html

That is the link to my form. What it's doing there is when you enter in the email field it's submits even though you haven't entered anything in the name field.

The code in my previous post is when you enter in the name and email fields correct it should submit and that's where im having the problem.

Thanks

I don’t see a reason why your validation code should stop your form from submitting. if you attach an event handler via JavaScript, you can only stop the default action this event would cause (in this case the form submit) via Event.preventDefault() (resp. its IE analogon window.event.returnValue = false). event handlers and event listeners are not inline JavaScript.


and yes, event handling pre-IE9 sucks, because you have to write cross-browser code (but rest assured, other useful and modern JavaScript features share the same fate)