I'm working on a form validation script at work and am having some difficulty. The form is meant to make sure that the user fills out a name, a real-looking email, a category (fromt he drop down) and a question:
This names the form and gathers all the data up from the form:
<script>
function checkForm(form1) {
name = document.getElementById(FieldData0).value;
category = document.getElementById(FieldData3).value;
question = document.getElementById(FieldData1).value;
email = document.getElementById(FieldData2).value;
This checks to see that something is in the name field. It works fine and validates exactly like it should, displaying the error text:
if (name == ) {
hideAllErrors();
document.getElementById(nameError).style.display = inline;
document.getElementById(FieldData0).select();
document.getElementById(FieldData0).focus();
return false;
This also works just like it should. It checks to see if the email field is empty and if it is empty,displays error text and selects that field:
} else if (email == ) {
hideAllErrors();
document.getElementById(emailError).style.display = inline;
document.getElementById(FieldData2).select();
document.getElementById(FieldData2).focus();
return false;
}
This also works just like it should, makes sure that the questions field isn't empty:
else if (question == ) {
hideAllErrors();
document.getElementById(questionError).style.display = inline;
document.getElementById(FieldData1).select();
document.getElementById(FieldData1).focus();
return false;
}
This one works partially - If no drop down is selected, it will display the error message, but that doesn't stop the form from submitting, it just displays the error text while the form submits:
else if (category == ) {
hideAllErrors();
document.getElementById(categoryError).style.display = inline;
document.getElementById(FieldData3).select();
document.getElementById(FieldData3).focus();
return false;
}
This one doesn't work at all no matter where I put it. I used a variation on the same script last week and it worked fine. This is supposed to check to see that the email entered looks like a real email address:
else if (!check_email(document.getElementById(FieldData1).value)) {
hideAllErrors();
document.getElementById(emailError2).style.display = inline;
document.getElementById(FieldData2).select();
document.getElementById(FieldData2).focus();
return false;
}
Otherwise it lets the form submit:
return true;
}
This checks the email out:
function check_email(e) {
ok = 1234567890qwertyuiop[]asdfghjklzxcvbnm.@-_QWERTYUIOPASDFGHJKLZXCVBNM;
for(i=0; i < e.length ;i++){
if(ok.indexOf(e.charAt(i))<0){
return (false);
}
}
if (document.images) {
re = /(@.*@)|(..)|(^.)|(^@)|(@$)|(.$)|(@.)/;
re_two = /^.+@([?)[a-zA-Z0-9-.]+.([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$/;
if (!e.match(re) && e.match(re_two)) {
return (-1);
}
}
}
This function hides all errors so the user isn't bombarded with red text. I tried putting in document.getElementById(emailError).style.display = none but that breaks the whole thing:
function hideAllErrors() {
document.getElementById(nameError).style.display = none
document.getElementById(emailError).style.display = none
document.getElementById(categoryError).style.display = none
document.getElementById(questionError).style.display = none
}
</script>
And the form looks like this:
<form onSubmit=return checkForm(); method=post action=http://www.emailmeform.com/fid.php?formid=303341io4u name=form1>
<p><div class=error id=nameError>Required: Please enter your name<br/></div><p><strong>Name:</strong> <span></span><br><input type=text name=FieldData0 id=FieldData0 value= size=22 tabindex=1 />
<label for=name></label></p>
<p><div class=error id=emailError>Required: Please enter your email address<br/></div>
<div class=error id=nameError2>This doesn't look like a real email address, please check and reenter<br/></div>
<strong><p>Email:</strong> <span>(will not be published)</span><br><input type=text name=FieldData2 id=FieldData2 value= size=22 tabindex=2 />
<label for=email></label>
</p>
<div class=error id=categoryError>Please select a category from the drop-down menu<br></div>
<p><strong>Category:</strong> <span></span><br>
<p><select id=FieldData3 name=FieldData3>
<option value=>Please select a category</option>
<option value=a>a</option>
<option value=b>b</option>
<option value=c>c</option>
<option value=d>d</option>
<option value=e>e</option>
<option value=f>f</option>
<option value=other>Other</option>
</select><label for=category></label>
<p><div class=error id=questionError>Please type your question in the box below:<br></div><label for=question><strong><p>Your Question:</strong> <span></span></label><br>
<textarea name=FieldData1 id=FieldData1 cols=50 rows=10></textarea></p>
<p><input type=submit class=btn value=Submit Question name=Submit></p>
</div>
</form>
Is the problem the order that I run the checks? I can't seem to figure this out. Any help would be appreciated.
