服务器/本地上的 JavaScript 表单验证

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 lets 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){