使用所需的复选框验证来阻止表单提交

Question

我有一些代码检查是否至少选中了一个复选框，然后提交表单（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"> 

Answer 1

处理数据时你可以做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"> 

Answer 2

您需要添加事件对表单提交

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

如果没有复选框的是检查preventDefault。这停止提交表格