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

Polymer iron-form validate at least one checkbox is checked

本文关键字：复选框 一个 验证 聚合物      更新时间：2023-09-26

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

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

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

相关文章：