如何重新定位表单验证器错误

Question

我使用的jQuery form validator在大多数情况下都非常成功（特别是对条件验证很酷）。但是，我遇到了一个无法解决的错误定位问题。

我正在验证一系列复选框，我需要用户选择至少一个复选框。该库具有通过向系列中的第一个复选框输入添加一些属性来处理此问题的功能。这是我的代码：

          <label id="cb1">
          <input type="checkbox" name="CheckboxGroup1[]" value="Teacher/professor/clinician-educator" id="CheckboxGroup1_0" data-validation="checkbox_group" data-validation-qty="min1" data-validation-error-msg="Please select at least one checkbox" >
          <span id="firstLabel">Teacher/professor/clinician-educator facilitated the session</span></label>

        <label>
          <input type="checkbox" name="CheckboxGroup1[]" value="large-group" id="CheckboxGroup1_1">
          Large group (&gt; 50 individuals)</label>

我添加了一些额外的标记（id =“ cb1”，因此我可以尝试操纵错误消息的位置，并将其放置在一系列复选框的上方，而不是在第一个复选框之后（请参见下面的屏幕抓图）。

以下是生成验证错误后的代码：

<label id="cb1" class="has-error">
          <input name="CheckboxGroup1[]" value="Teacher/professor/clinician-educator" id="CheckboxGroup1_0" data-validation="checkbox_group" data-validation-qty="min1" data-validation-error-msg="Please select at least one checkbox" current-error="Please select at least one checkbox" class="error" style="border-color: rgb(255, 0, 0);" type="checkbox">

          <span id="firstLabel">Teacher/professor/clinician-educator facilitated the session</span>

请至少选中一个复选框                                   大型团体（> 50个人）

我尝试了各种方法来更改所注入代码（<span class="help-block form-error">Please select at least one checkbox</span>）的页边距，包括以下内容：

#cb1.has-error span {
  margin-top: -45px;    
}
#cb1.has-error span#firstLabel {
  display: inline;
  margin-top: 20px;
}

有什么建议吗？我与主要作者联系，但还没有得到答复，我的委托人也发痒了。

感谢所有帮助！

• 乔

Answer 1

您可以为特定输入定义自定义消息容器。

<div id="email-error-dialog"></div>
  <p>
 E-mail:
<input type="email" name="user-email" data-validation="email" 
     data-validation-error-msg="You did not enter a valid e-mail" 
     data-validation-error-msg-container="#email-error-dialog">
 </p>

来源：http://www.formvalidator.net/#configuration_position