Stop the submit button from going through.

[murphyhg]

I have a form script which has an action to an external file and all of the validation works except once I click okay to all of the alert boxes it runs the form action. This defeats the purpose of doing validation.

<script type='text/javascript'>
function formValidator(){
// Make quick references to our fields
var aname = document.getElementById('aname');
var fullname = document.getElementById('fullname');
var comments = document.getElementById('comments');
var email = document.getElementById('email');

// Check each input in the order that it appears in the form!
if(isEmpty(aname, "Please select and application to email")){
if(isEmpty(fullname, "Please type to select who gets the email")){
if(isEmpty(comments, "Please enter a comment")){
if(emailValidator(email, "Please Choose a name from the application")){

}
}
}
}


return false;

}

function isEmpty(elem, helperMsg){
if(elem.value.length == 0){
alert(helperMsg);
elem.focus(); // set the focus to this input
return true;
}
return false;
}

function isNumeric(elem, helperMsg){
var numericExpression = /^[0-9]+$/;
if(elem.value.match(numericExpression)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}

function isAlphabet(elem, helperMsg){
var alphaExp = /^[a-zA-Z]+$/;
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}

function isAlphanumeric(elem, helperMsg){
var alphaExp = /^[0-9a-zA-Z]+$/;
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}

function lengthRestriction(elem, min, max){
var uInput = elem.value;
if(uInput.length >= min && uInput.length <= max){
return true;
}else{
alert("Please enter between " +min+ " and " +max+ " characters");
elem.focus();
return false;
}
}

function madeSelection(elem, helperMsg){
if(elem.value == "Please Choose"){
alert(helperMsg);
elem.focus();
return false;
}else{
return true;
}
}

function emailValidator(elem, helperMsg){
var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
if(elem.value.match(emailExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
</script>

<form onsubmit='return formValidator()' action="x.html">
Full Name: <input type='text' id='fullname' /><br />
Sate: <select id='aname'>
<option>Please Choose</option>
<option>AL</option>
<option>CA</option>
<option>TX</option>
<option>WI</option>
</select><br />
Comments:<input type='text' id='comments' /><br />
Email: <input type='text' id='email' /><br />
<input type='submit' value='Check Form' />
</form>

 

[tsuji]

[1]
[tt]function formValidator(){
// Make quick references to our fields
var aname = document.getElementById('aname');
var fullname = document.getElementById('fullname');
var comments = document.getElementById('comments');
var email = document.getElementById('email');
// Check each input in the order that it appears in the form!
if(isEmpty(aname, "Please select and application to email")){
return false;
} else if(isEmpty(fullname, "Please type to select who gets the email")){
return false;
} else if(isEmpty(comments, "Please enter a comment")){
return false;
} else if(emailValidator(email, "Please Choose a name from the application")){
return false;
} else {
return true;
}
}[/tt]
[1.1] Can make it look more compact figuratively (a,b,c,d for the isEmpty expressions) like this using short-circuit of boolean test, if so prefer; but since a,b,c,d are quite long expression, that may make it look awkward.
[tt] if(a||b||c||d} {
return false;
} else {
return true;
}[/tt]
[1.2] Or even this
[tt] return !(a||b|c||d);[/tt]
[2] Slightly more clearer in showing the purpose.
if(elem.value.match(emailExp)){
[tt]if(emailExp.test(elem.value)){[/tt]