Javascript 对某些项目的验证

Question

我正在尝试通过 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:connor.bulmer@live.co.uk" 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

Answer 1

将if中的所有&&(and)改为||(or)；
将 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。

Javascript 对某些项目的验证

Javascript Validation on certain items

javascript

contact