用于具有不同名称的复选框组的jQuery验证方法

时间:2017-11-06 17:58:32

标签: javascript jquery jquery-validate

我有一组复选框,由于与其他平台的集成,必须有不同的名称,尽管它们都是相关的。

<div class="form-group col-xs-6 checkbox-group">
      <label class="block input-group" for="Field5">Type of Insurance<span class="required-mark">*</span></label>
      <span><input type="checkbox" name="Field5" class="validate checkbox-group" value="Auto" >Auto</span>
      <span><input type="checkbox" name="Field6" class="validate checkbox-group"  value="Home" >Home</span>
      <span><input type="checkbox" name="Field7" class="validate checkbox-group"  value="Auto &amp; Home" >Home</span>
      <span><input type="checkbox" name="Field8" class="validate checkbox-group" value="Renters">Condo, Co-op,Renters</span>
</div>

通常,您可以使用Field []并在jQuery验证规则中验证并将其设置为必需。我不能将每个字段都设置为必需,因为只有一个复选框必须被选中,但它们都可以被检查。

这让我相信我需要一种自定义方法。

jQuery.validator.addMethod("checkone", function(){
    if( $(".checkbox-group").is(":checked") ){
      return true;
    }
    return false; 
}, "Please check at least of one");

我似乎无法弄清楚如何只在屏幕上显示一条错误消息。验证工作但在没有选中任何复选框时输出四个单独的错误。

该规则已添加到每个复选框

$(this).rules('add', { checkone: true });

1 个答案:

答案 0 :(得分:2)

  

我似乎无法弄清楚如何只在屏幕上显示一条错误消息。验证工作但在没有选中任何复选框时输出四个单独的错误。

您可以在.validate()中使用the groups option将所有错误消息合并为一个。

$('#yourForm').validate({
    groups: {
        anyName: "Field5 Field6 Field7 Field8"
    },
    // other options, etc.
});

DEMO:jsfiddle.net/x2ezo033/

然后,您可以使用errorPlacement中的条件函数将其放置在布局中的任何位置。