Polymer iron-form 验证至少一个复选框被选中

Question

我将铁型组件与 Polymer 一起使用，并尝试验证是否选中了一组复选框中的至少一个复选框。

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

Answer 1

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

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

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>

Polymer iron-form 验证至少一个复选框被选中

Polymer iron-form validate at least one checkbox is checked

javascript

polymer

polymer-1.0