javascript form validation on server/local

Question

I'm using javascript form validation for the entry form for a contest I'm running. It's inline CSS so that if certain conditions aren't met, it displays, in red, messages that say "please enter your email address" or "that doesn't look like a valid email address" etc.

The script, which sits at the top of the file, looks like this:

<script>

  function checkForm() {
name = document.getElementById("name").value;
email = document.getElementById("email").value;
terms = document.getElementById("terms").value;


  if (name == "") {
  hideAllErrors();
document.getElementById("nameError").style.display = "inline";
document.getElementById("name").select();
document.getElementById("name").focus();
  return false;
  } else if (email == "") {
hideAllErrors();
document.getElementById("emailError").style.display = "inline";
document.getElementById("email").select();
document.getElementById("email").focus();
  return false;
  } 

else if (!check_email(document.getElementById("email").value)) {
hideAllErrors();
document.getElementById("emailError2").style.display = "inline";
document.getElementById("email").select();
document.getElementById("email").focus();
  return false;
  } 

else if (!document.form1.terms.checked){
hideAllErrors();
document.getElementById("termsError").style.display = "inline";
document.getElementById("terms").select();
document.getElementById("terms").focus();
  return false;
  } 

  return true;
  }

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);     
} 

}

}
 function hideAllErrors() {
document.getElementById("nameError").style.display = "none"
document.getElementById("emailError").style.display = "none"
document.getElementById("commentError").style.display = "none"
document.getElementById("termsError").style.display = "none"

  }

The email and name validation work just fine, the part of the form that won't work looks like this:

<form onSubmit="return checkForm();" method="get" action="sweepstakes-results.php" 
<input type=checkbox name=terms id=terms ><br></p>
<div class=error id=termsError>Required: Please check the checkbox<br></div>
<p><input type=submit value=Send style="margin-left: 50px"> </p>
</form>

The "terms and conditions" checkbox only works if the file is on my local machine, when I upload it, it just let's me submit the form even if it's not checked. Isn't javascript run on the browser? How could the location of the file make a difference?

Answer 1

Your form doesn't have a name, so the following code won't work:

else if (!document.form1.terms.checked){

Since you're already retrieving the DOM object of the checkout, do the following. Change the line:

terms = document.getElementById("terms").value;

to:

terms = document.getElementById("terms");

And the replace that else if code with:

else if (!terms.checked){