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

Question

我正在使用带有Polymer的铁形组件，并尝试验证是否选中了一组复选框中的至少一个复选框。

当我在铁形式上调用submit（）时，会调用validate函数。如何添加自定义验证规则以确保至少选中一个复选框？

Answer 1

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

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

＆＃13;

＆＃13;

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');
  }
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;