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

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()不是函数。 有没有一种方法可以在复选框上运行有效性并使至少两个必需/选中的一项？

Answer 1

.is(":checked")已经返回一个boolean ...没有.checkValidity()方法。 做就是了：

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

---

更新：

在这种情况下，您所需的需求和验证实际上是两组独立的逻辑。

约束验证基于每个输入运行，因此您必须自己检查多个输入。

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

Answer 2

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

并且checkValidity()是DOM方法，因此您应该使用document.getElementById("frm_isuser").checkValidity()或$("#frm_isuser")[0].checkValidity() 。

编辑：如果两个复选框中的一个被选中，然后设置required属性false他们两个。 如果未选中任何一项，请将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>