如何验证两个复选框并确保至少选中一个？

Question

我的表单中有两个复选框，所有其他表单字段都使用 HTML5 属性，因此我可以在提交时进行运行验证。这有点不同，因为我有两个复选框输入字段，我必须要求至少选中一个。这是示例：

$('.frm-Submit').on('submit', submitFrm);
function submitFrm(e){
    e.preventDefault(); // Prevnts default form submit.
    var $checkbox = $('.account-type');

    $checkbox.on('change', function(){
        var checked = false;
  
        $checkbox.each(function(){
           checked = checked || $(this).is(':checked')
        });
  
        $checkbox.prop('required', !checked)
    });

    console.log('Submit form.')
}

.form-group.required .control-label:after {
    content: " *";
    color: red;
}

<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<form name="frmSave" id="frmSave" class="frm-Submit" autocomplete="off">
  <div class="form-group required">
    <label class="control-label" for="account"><span class="label label-primary">Account Type:</span></label>
    <div class="checkbox">
      <label for="user">
         <input type="checkbox" name="frm_isuser" id="frm_isuser" data-toggle="collapse" data-target="#user-account" required class="account-type"> <span class="label label-default">User</span>
      </label>
      <label for="staff">
         <input type="checkbox" name="frm_isstaff" id="frm_isstaff" data-toggle="collapse" data-target="#staff-account" required class="account-type"> <span class="label label-info">Staff</span>
      </label>
    </div>
  </div>
   <div class="row">
     <div class="form-group col-xs-12 col-sm-12 col-md-1 col-lg-1">
       <button type="submit" name="frm_submit" id="frm_submit" class="btn btn-primary">Submit</button>
     </div>
   </div> 
</form>

上面的示例抛出错误 isUser.checkValidity() 不是函数。有没有办法运行复选框的有效性并至少使两者之一 required/checked?

Answer 1

.is(":checked") 已经 returns 一个 boolean...没有 .checkValidity() 方法。只是做：

if (isUser || isStaff) {
  //...code here if at least one is true
}

更新：

在这种情况下，您需要的需求和验证本质上是两组独立的逻辑。

Constraint validation 基于每个输入运行，因此您必须自己检查多个输入。

您可以选择通过侦听每个复选框上的事件来交换 required 参数的值...但是由于它们似乎有不同的 data-target，我认为更好的解决方案是可能只是使用 select 表单类型。

Answer 2

$("#frm_isuser").is(":checked") 将 return 一个布尔值，显示 $("#frm_isuser") 是否被选中。

而checkValidity()是一个DOM方法，所以你应该使用document.getElementById("frm_isuser").checkValidity()或$("#frm_isuser")[0].checkValidity()。

编辑：如果选中两个复选框之一，则将 required 属性设置为 false 到它们。如果选中 none 个，则将 required 设置为 true。

$('.frm-Submit').on('submit', submitFrm);

var $checkbox = $('.custom-class')

$checkbox.on('change', function(){
  var checked = false;
  
  $checkbox.each(function(){
    checked = checked || $(this).is(':checked')
  })
  
  $checkbox.prop('required', !checked)
})

function submitFrm(e) {
  e.preventDefault(); // Prevnts default form submit.
  
  console.log('Submit form.')
}

.form-group.required .control-label:after {
  content: " *";
  color: red;
}

<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<form name="frmSave" id="frmSave" class="frm-Submit" autocomplete="off">
  <div class="form-group required">
    <label class="control-label" for="account"><span class="label label-primary">Account Type:</span></label>
    <div class="checkbox">
      <label for="user">
         <input type="checkbox" name="frm_isuser" id="frm_isuser" data-toggle="collapse" data-target="#user-account" required class="custom-class"> <span class="label label-default">User</span>
      </label>
      <label for="staff">
         <input type="checkbox" name="frm_isstaff" id="frm_isstaff" data-toggle="collapse" data-target="#staff-account" required class="custom-class"> <span class="label label-info">Staff</span>
      </label>
    </div>
  </div>
  <div class="row">
    <div class="form-group col-xs-12 col-sm-12 col-md-1 col-lg-1">
      <button type="submit" name="frm_submit" id="frm_submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

Answer 3

这样添加，

$(function(){
 
 $('[type="checkbox"]').prop('required', true);
 $('[type="checkbox"]').filter('[required]').change(function(){
  $('[type="checkbox"]').prop('required', ($(this).is(':checked')) ? false : true);
 })
 $('.frm-Submit').on('submit', function(e){
        e.preventDefault(); // Prevnts default form submit.  
        if($('[type="checkbox"]:checked').length > 0){   
            console.log('Submit form.')
        }else{
   $(this).closest('form').get(0).checkValidity();
  }
    });
 
});

<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<form name="frmSave" id="frmSave" class="frm-Submit" autocomplete="off">
  <div class="form-group required">
    <label class="control-label" for="account"><span class="label label-primary">Account Type:</span></label>
    <div class="checkbox">
      <label for="user">
         <input type="checkbox" name="frm_isuser" id="frm_isuser" data-toggle="collapse" data-target="#user-account"> <span class="label label-default">User</span>
      </label>
      <label for="staff">
         <input type="checkbox" name="frm_isstaff" id="frm_isstaff" data-toggle="collapse" data-target="#staff-account"> <span class="label label-info">Staff</span>
      </label>
    </div>
  </div>
   <div class="row">
     <div class="form-group col-xs-12 col-sm-12 col-md-1 col-lg-1">
       <button type="submit" name="frm_submit" id="frm_submit" class="btn btn-primary">Submit</button>
     </div>
   </div> 
</form>

如何验证两个复选框并确保至少选中一个？

How to validate two check boxes and make sure that at least one is checked?

html

javascript

jquery

html5-validation

checkvalidity