使用必需的复选框验证来防止表单提交答案

【问题标题】：Using required checkbox validation to prevent form submission使用必需的复选框验证来防止表单提交
【发布时间】：2017-08-08 13:55:43
【问题描述】：

我有一些代码检查是否至少选择了一个复选框，然后提交表单 (MailChimp)。我的问题是，如果它发现没有选中任何复选框，我不知道如何停止 MailChimp 提交。现在它显示警报，然后无论如何提交表单......没什么帮助。

<form onsubmit="valthis()" action="//mailchimp form" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>

// form html

        <script>function valthis() {
var checkBoxes = document.getElementsByClassName( 'myCheckBox' );
var isChecked = false;
    for (var i = 0; i < checkBoxes.length; i++) {
        if ( checkBoxes[i].checked ) {
            isChecked = true;
        };
    };
    if ( isChecked ) {
        alert( 'At least one checkbox is NOT checked!' );
        }   
}</script>

<input type="submit" value="Subscribe to notifications" name="subscribe" id="mc-embedded-subscribe" class="button">

【问题讨论】：

标签： javascript validation checkbox require

【解决方案1】：

您需要在提交时向表单添加一个事件

document.getElementsByName("subscribe").onsubmit(function(event) {
    if(!isChecked) { //If not checked
        event.preventDefault(); // stops the form submitting
    }
});

如果没有选中复选框 preventDefault。这会阻止表单提交

【讨论】：

我在当前 javascript 下面添加了document.getElementsByName 代码。不去。我是不是放错地方了？
function valthis() { var checkBoxes = document.getElementsByClassName( 'myCheckBox' ); var isChecked = true; for (var i = 0; i < checkBoxes.length; i++) { if ( checkBoxes[i].checked ) { isChecked = false; }; }; if ( isChecked ) { alert( 'At least one checkbox is NOT checked!' ); } document.getElementsByName("subscribe").onsubmit(function(event) { if(!isChecked) { //If not checked event.preventDefault(); // stops the form submitting } }); }
像@user5753132说的需要在函数外添加

【解决方案2】：

处理数据时可以return你的JS函数的值：

<form onsubmit="return valthis()" action="//mailchimp form" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>

<script>
function valthis() {
    var checkBoxes = document.getElementsByClassName( 'myCheckBox' );
    var isChecked = false;

    for (var i = 0; i < checkBoxes.length; i++) {
        if ( checkBoxes[i].checked ) {
            isChecked = true;
            break; //don't need to continue the loop once a checkbox was found
        }
    }

    if ( !isChecked ) {
        alert( 'At least one checkbox is NOT checked!' );
        return false;
    }

    return true;
}
</script>

<input type="submit" value="Subscribe to notifications" name="subscribe" id="mc-embedded-subscribe" class="button">

【讨论】：