JS 表单验证不会发生

Question

当我测试这个表单时，函数 validateJob 工作正常，但似乎没有发生与 validateCheckbox 或 validateEmail 相关的事情。我没有收到错误。

对于这个项目，除了验证之外，我不需要表单来实际执行任何操作。我是一个初学者，所以我希望找到一个小的修复，而不是完全重组我目前所拥有的。

这是我的脚本：

<script type="text/javascript">
/* <![CDATA[ */
function validateForm(form){
  var validation = true;
  validation &= validateJob(form);
  validation &= validateEmail(form);
  validation &= validateCheckbox(form);
  return validation;
}
function validateJob(){
    var jobSelected=false;

    for (var i=0; i<3; ++i) {
        if (document.forms[0].job[i].checked == true) {
        jobSelected=true;
        break;
        }
    }
    if (jobSelected == false) {
        window.alert("You must select a job option.");
        return false;
    }
    else {
       return true;
    }
//function to check check box
 function validateCheckbox() {
      var contactSelected = false;
    if (document.forms[0].contact.checked==true) {
       contactSelected=true;
    }
    if (contactSelected == false) {
    window.alert("You must approve being contacted.");
    return false;
    }
    else
    return true;
    }
//end checkbox check
}

function trim(s)
{
  return s.replace(/^\s+|\s+$/, '');
} 

function validateEmail() {
    var error="";
    var tfld = trim(document.forms[0].email);                       
 //     value of field with whitespace trimmed off
    var emailFilter = /^[^@]+@[^@.]+\.[^@]*\w\w$/ ;
    var illegalChars= /[\(\)\<\>\,\;\:\\\"\[\]]/ ;

    if (document.forms[0].email.value == "") {
        error = "You didn't enter an email address.\n";
    } else if (!emailFilter.test(tfld)) {             
 //test email for illegal characters
        error = "Please enter a valid email address.\n";
    } else if (document.forms[0].email.value.match(illegalChars)) {
        error = "The email address contains illegal characters.\n";
    } 
    window.alert(error);
}

function confirmReset() {
        return resetForm;
}

/* ]]> */
</script>    

这是我的html：

    <form onSubmit="return validateForm(this)">
    <p> <label for="name">Full name: </label>
    <input type="text" name="fullname"></p>
    <p> <label for="email">Email: </label>
    <input type="text" name="email"></p>

    <p> <label for="job">I am applying to be a: </label><br/>
    <input type="radio" name="job">Waiter<br/>
    <input type="radio" name="job">Line cook<br/>
    <input type="radio" name="job">Other</p>
    <p> <label for="contact">Yes, you may contact me </label>
    <input type="checkbox" name="contact" ></p> 
   <input type="submit" value="Submit">
   <input type="reset" /></p>
</form>

Answer 1

您可以利用htmlrequired、title属性，将<label>元素的位置调整到<input>元素之后； css:invalid，content，相邻兄弟选择器+

:not([type=radio]):invalid + [for]:after {
  content:attr(title);
}

[type=radio]:invalid ~ [for]:after, [type=checkbox]:invalid ~ [for]:after {
  content: attr(title);
}

:invalid + [for] {
  color:red;
  font-style:italic;
}

<form>
  <p>
    Full name:
      <input type="text" minlength="1" pattern="\w+" name="fullname" required />
    <label title="You must enter full name" for="name"></label>
  </p>
  <p>
    Email:
      <input type="text" name="email" required />
    <label title="Please enter a valid email address" for="email"></label>
  </p>

  <p>
    I am applying to be a:
    <br/>
    <input type="radio" name="job" required />Waiter
    <br/>
    <input type="radio" name="job" />Line cook
    <br/>
    <input type="radio" name="job" />Other
    <label title="You must select a job option." for="job"></label>
  <p>
    Yes, you may contact me
    <input type="checkbox" name="contact" required />
    <label title="You must approve being contacted." for="contact"></label>
  </p>
  <p>
    <input type="submit" value="Submit" />
    <input type="reset" />
  </p>
</form>