对某些项目的Javascript验证

我试图通过JavaScript验证来获得某些可选字段，如果其中任何一个为空，则表单不应该被发送。我已经尝试了很多修补程序，但代码仍然不起作用。我究竟做错了什么？代码如下：对某些项目的Javascript验证

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="UTF-8" /> 
    <title>Contact us | Bhutan</title> 
    <link rel="stylesheet" href="style.css" /> 

    <script> 
    function validate() { 
     //checks to see whether the required fields are filled. 
     //if comment AND checkboxes AND Newsletter are empty the form will not send. 
     if (document.commentFrm.Comment.value=="" && document.commentFrm.newsletter.checked==false && document.commentFrm.brochure1.checked==false && document.commentFrm.brochure2.checked==false && document.commentFrm.brochure3.checked==false) { 
      alert("Please enter required information"); 
      return false; 
     } 
     return true; 
    } 
    </script> 
</head> 

<body> 

<script> 
// Script that asks a user for a number and subsequently compares it to a randomly generated number. 

num=prompt("Enter a number between 1 and 10"); 
document.write(num + "<br />"); 

var x=(Math.floor((Math.random()*10)+1)); 

if (num==x) { 
    alert("You have won a place on the shuttle! Your cryogenic chamber is being prepared! "); 
} 
else 
{ 
    alert("Go home. I'm afraid that your number " + num +" is not today's lucky number and you will not be permitted to colonise new planets."); 
} 
</script> 


<!-- Main page header --> 

<header> 
    <h1>Religion and Culture in Bhutan</h1> 
</header> 

<!-- Page Navigation --> 

<nav> 
    <ul> 
     <li><a href="index.html"> Home </a></li> 
     <li><a href="happiness.html">Happiness</a></li> 
     <li><a href="faceofrule.html">Face Of Rule</a></li> 
     <li><a href="health.html">Health</a></li> 
     <li><a href="culture.html">Religion</a></li> 
     <li><a href="contact.html">Contact Us</a></li> 
    </ul> 
</nav> 

<article> 

    <!-- Form that takes users information and emails it for marketing purposes. --> 

    <form name="commentFrm" onSubmit="validate()" action="mailto:[email protected]" enctype="text/plain" method="post"> 
    <table> 
     <tr> 
      <td>Title: </td> 
      <td> 
        <select> 
          <option value="Mr">Mr</option> 
          <option value="Mrs" selected>Mrs</option> 
          <option value="Ms">Ms</option> 
          <option value="Miss">Miss</option> 
          <option value="Dr">Dr</option> 
          <option value="Prof">Prof</option> 
        </select> 
      </td> 
     </tr> 

     <tr> 
      <td>First Name: </td> 
      <td><input type="text" name="firstname" size="20" maxlength="20" id="firstname" required></td> 

      <td>Comment:</td> 

     </tr> 

     <tr> 
      <td>Surname: </td> 
      <td><input type="text" name="surname" size="20" maxlength="20" id="surname" required></td> 

      <td rowspan="7"><textarea name="comment" rows="12" cols="50"></textarea></td> 
      <td>Brochure</td> 
     </tr> 

     <tr> 
      <td>Email: </td> 
      <td><input type="email" name="email" size="50" required></td> 

      <td> <input type="checkbox" name="brochure1" value="luxury" ></td> 
      <td>luxury</td> 
     </tr> 

     <tr> 
      <td>Phone: </td> 
      <td><input type="text" name="phone" size="50" required></td> 

      <td><input type="checkbox" name="brochure2" value="family" ></td> 
      <td>family</td> 
     </tr> 

     <tr> 
      <td>Address 1: </td> 
      <td><input type="text" name="address1" size="50" required></td> 

      <td><input type="checkbox" name="brochure3" value="18-30"></td> 
      <td>18-30</td> 
     </tr> 

     <tr> 
      <td>Address 2: </td> 
      <td><input type="text" name="address2" size="50"></td> 

      <td>Newsletter</td> 
      <td><input type="checkbox" name="newsletter" value="newsletter"></td> 
     </tr> 

     <tr> 
      <td>Town: </td> 
      <td><input type="text" name="town" size="50" required></td> 

     </tr> 

     <tr> 
      <td>Post code: </td> 
      <td><input type="text" name="postcode" size="50" required></td> 
     </tr> 


     <tr> 
      <td></td> 
      <td></td> 
      <td><input type="submit" name="submit" onClick="validate()" value="click here to submit" style="float: right;"></td> 
     </tr> 

    </table> 
</form> 
</article> 

<!-- Footer leading to contact form --> 

<footer> 
    <p>Developed for Bhutan, <a href="contact.html"> get in touch </a></p> 
</footer> 


</body> 
</html>enter code here

来源

2016-01-22 CBlegend

改变所有&&（和）在如果||（或）;
变化onsubmit="validate()"到onsubmit="return validate()"
变化.Comment.value到，因为这是.comment.value名称和JS区分大小写;
最后从按钮

更具可读性删除onClick="validate()"：删除所有内嵌处理器，改变name="commentFrm"到id="commentFrm"，并有这头

window.onload=function() { 
    document.getElementById("commentFrm").onsubmit=function() { 
    //checks to see whether the required fields are filled. 
    //if comment OR checkboxes OR Newsletter are empty the form will not send. 
    if (this.comment.value=="" || 
     this.newsletter.checked==false || 
     this.brochure1.checked==false || 
     this.brochure2.checked==false || 
     this.brochure3.checked==false) { 
      alert("Please enter required information"); 
      return false; 
    } 
    return true; 
    } 
}

PS：提示脚本应该使用一些innerHTML的容器而不是document.write。

来源

2016-01-22 10:35:29 mplungjan

'！'不是'or'：P使用'|' –

谢谢 - 从过去的日子:) – mplungjan

对某些项目的Javascript验证

回答

相关问题