如何更改 Jquery require_from_group 方法的默认样式？

Question

我正在使用 jQuery 验证插件生成一个警报，如果用户没有在一组表单中至少选中一个框，则该警报会弹出，利用 require_from_group 方法。但是，有很多复选框，当在所有三十个复选框选项中间出现警告时，看起来很奇怪。我希望只有一个警报出现在组的顶部。如何做到这一点？

这就是我所说的图片：

thirty-four alerts when all I want is one

HTML:

<div class="form-group">
  <label for="inputPassword3" class="col-sm-2 control-label">Occupation: Check All That Apply</label>
  <div class="col-sm-10">
    <div class="checkbox">

      <label>
        <input class="occupation-group" onchange="showHideControlgrowerchecks();" type="checkbox" name="Grower" id="Grower"> Grower</label>
      <br>

      <label>
        <input class="occupation-group" type="checkbox" name="PCA_Consultant" id="PCA_Consultant"> PCA/Consultant</label>
      <br>

      <label>
        <input class="occupation-group" type="checkbox" name="Packer_Processor" id="Packer_Processor"> Packer/Processor</label>
      <br>

      <label>
        <input class="occupation-group" type="checkbox" name="Research_Gov_Ed" id="Research_Gov_Ed"> Research/Gov/Ed</label>
      <br>

      <label>
        <input class="occupation-group" type="checkbox" name="Assn_Commission" id="Assn_Commission"> Assn/Commission</label>
      <br>

      <label>
        <input class="occupation-group" type="checkbox" name="Suppliermfgsvc" id="Suppliermfgsvc"> Supplier/Mfg/Svc</label>
      <br>

      <label>
        <input class="occupation-group" type="checkbox" name="Ad_Agency" id="Ad_Agency"> Ad Agency</label>
      <br>

      <label>
        <input class="occupation-group" type="checkbox" onchange="showHideControloccupation();" name="Other" id="Other"> Other</label>
      <br>
      <br>
      <input type="text" class="form-control" style="display:none" name="Occupation-Other" id="Occupation-Other" placeholder="Please Specify Other Occupation Here" required>
      <br>
      <br>



    </div>
  </div>
</div>

Javascript:

$("#form1").validate({
  rules: {
    Grower: {
      require_from_group: [1, ".occupation-group"]
    },
    PCA_Consultant: {
      require_from_group: [1, ".occupation-group"]
    },
    Packer_Processor: {
      require_from_group: [1, ".occupation-group"]
    },
    Research_Gov_Ed: {
      require_from_group: [1, ".occupation-group"]
    },
    Assn_Commission: {
      require_from_group: [1, ".occupation-group"]
    },
    Suppliermfgsvc: {
      require_from_group: [1, ".occupation-group"]
    },
    Ad_Agency: {
      require_from_group: [1, ".occupation-group"]
    },
    Other: {
      require_from_group: [1, ".occupation-group"]
    }

  }
});

Answer 1

require_from_group方法没有"default styling"这样的东西。

要将 34 条消息合二为一，请使用 the groups option。

如果您不喜欢插件放置验证消息的位置，请使用 the errorPlacement option 进行更改。在您的自定义函数中，您可以使用条件来移动一种类型的消息，为其他所有内容保留默认位置。

如何更改 Jquery require_from_group 方法的默认样式？

How can I change the default styling for Jquery require_from_group method?

html

javascript

jquery

jquery-validate