Question

我正在尝试完成家庭作业并遇到一些问题。我应该用Javascript验证表单。现在，我正在尝试确保用户至少检查了一个复选框（四个选项中），以便提交表单。（我已经让其他部分验证工作，所以问题似乎是这部分代码的本地问题。）

这是复选框表单的html：

<fieldset>
    <input type="checkbox" name="boxes" id="member" value="member" />
    <label for="member">I'm a member.</label>

    <p><input type="checkbox" name="boxes" id="newsletter" value="newsletter" />
    <label for="newsletter">Please send me your monthly newsletter.</label></p>

    <p><input type="checkbox" name="boxes" id="preshow" value="preshow" />
    <label for="preshow">I'm interested in hearing about pre-show events.</label></p>

    <p><input type="checkbox" name="boxes" id ="none" value="none" />
    <label for="none">None of the above.</label></p>

这就是我用来尝试使用Javascript验证它的内容：

function validateForm() {
  var checkBoxes = document.getElementsByName("boxes");
  for (var i=0; i < checkBoxes.length; i++) {
    if (checkBoxes[i].checked === true) {
        return true;
        break;
    } else {
        alert("At least one checkbox must be selected.");
        return false;
    }
  }
}

这不起作用;表格提交是否已检查过方框。我真的很想在这里得到一些帮助，因为我不知道自己做错了什么。就像我说的那样，问题似乎存在于这个特定的代码中，因为在单独的代码块中的其他验证确实有效。

这是完整的HTML：

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8"/>
    <title> hw5 </title>
    <link rel ="stylesheet" href="form.css"/>
    <script src="form.js"></script>
    <script src="states.js"></script>
    <!--<script src="browser.js"></script>-->
    </head>
    <body>
    <div>
    <h1><b>Buy your tickets online</b></h1>
    <form name="theForm" method="post" action="https://cs101.cs.uchicago.edu/~sterner/show-data.php" onsubmit="return validateForm(this)">
        <section id="name-and-address">
        <fieldset>
            <h2 class="name">Full name</h2>
                <label for="firstname">First name:</label> <input type="text" name ="firstname" id="firstname" autofocus="autofocus" />
                <p><label for="lastname">Last name:</label> <input type="text" name ="lastname" id="lastname" /></p>
        </fieldset> 
        <fieldset>
            <h2 class="Billing Address">Billing Address</h2>
                <label for="street">Street name and number:</label>
                    <input type="text" name ="street" id="street" />
                <p><label for="city">City:</label>
                    <input type="text" name="city" id="city" /></p>
                <p><label for="state">State:</label> 
                    <select id="state" name="state">
                    </select></p>
                <p><label for="zip">Zip code:</label>
                    <input type="text" name="zip" id="zip" /></p>
        </fieldset>
        </section>
        <section>
        <aside>
        <fieldset>
            <h2 class="payMethod">Method of Payment</h2>
                <p class="row">
                    <input type="radio" id="pay-pal" name="payment" value="pay-pal" />
                    <label for="pay-pal">PayPal</label>
                </p>
                <p class="row">
                    <input type="radio" id="credit" name="payment" value="credit" />
                    <label for="credit">Credit Card</label>
                </p>
        </fieldset> 
        <fieldset>
                <input type="checkbox" name="boxes" id="member" value="member" />
                    <label for="member">I'm a member.</label>
                <p><input type="checkbox" name="boxes" id="newsletter" value="newsletter" />
                    <label for="newsletter">Please send me your monthly newsletter.</label></p>
                <p><input type="checkbox" name="boxes" id="preshow" value="preshow" />
                    <label for="preshow">I'm interested in hearing about pre-show events.</label></p>
                <p><input type="checkbox" name="boxes" id ="none" value="none" />
                    <label for="none">None of the above.</label></p>
        </fieldset>
        <fieldset>
                <p><label for="email">Email address:</label>
                    <input type="email" name="email" id="email" /></p>
        </fieldset>
        </aside>
        </section>
        <section id="submit">
        <fieldset>
            <input type="submit" value="Buy my tickets."/>
        </fieldset>
        </section>
</div>
</body>
</html>

JS中的表单验证用于复选框

0 个答案: