聚合物铁形式验证至少一个复选框被选中

Question

我正在使用聚合物铁形式的组件，并试图验证是否至少有一个复选框中的一个复选框被选中。

当我调用一个iron-form的submit（）时，调用validate函数。我如何添加自定义验证规则以确保至少有一个复选框被选中？

Answer 1

使用querySelectorAll('input[type="checkbox"]:checked').length可以获得检查数量checkboxes。

如果值为0，则显示/警告错误消息并阻止提交表单。

var myForm = document.getElementById('myForm'); 
 
myForm.addEventListener("submit", function(e) { 
 
    var no_of_cb_checked = myForm.querySelectorAll('input[type="checkbox"]:checked').length; 
 
    if (no_of_cb_checked == 0) { 
 
    e.preventDefault(); 
 
    alert('Select atleast one checkbox'); 
 
    } 
 
});

<form id='myForm'> 
 
<input type='checkbox' name='form1' value='CB1'>CB1 
 
<input type='checkbox' name='form1' value='CB2'>CB2 
 
<input type='checkbox' name='form1' value='CB3'>CB3 
 
<input type='checkbox' name='form1' value='CB4'>CB4 
 
<input type='submit'> 
 
</form>