jquery 验证：在自定义 div 中显示错误标签

Question

我试图在 div 中显示错误标签，但是它不起作用。

<div class="panel-body">
      <div class="well-custom datecontrol-fixed datecontrol-fixed-xs">
          <div class="input-group">
               <input type="text" class="form-control input-sm" id="TextBoxProdMoveDate" name="TextBoxProdMoveDate"/>
                      <label class="input-group-addon btn" for="TextBoxProdMoveDate">
                          <span class="glyphicon glyphicon-calendar"></span>
                       </label>
                     </div>
                    <div id="DivProdMoveDateErrorContainer"></div>
                   </div>
                 </div>

然后，像这样设置规则，

required: true,
messages: {required: "Production move date is required."},
errorLabelContainer: '#DivProdMoveDateErrorContainer',

但是，它不起作用。

我所期望的是，在 DivProdMoveDateErrorContainer 中显示错误标签。

任何建议将不胜感激。

Answer 1

Jquery 验证为每个数据不正确的字段生成一个标签，如：

<label id="reg_name-error" class="error" for="reg_name" style="display: inline-block;">Please enter name</label>

只需复制 DOM 中的整个标签并将其粘贴到 div 或您想要错误消息的位置，方法是从中删除错误消息文本，例如：

<label id="reg_name-error" class="error" for="reg_name" style="display: inline-block;"></label>

然后刷新页面再试一次。

解释：如果页面中已经存在错误标签，则验证jquery将不会生成标签，而是使用已经存在的标签。

或者您可以简单地放置在您的自定义位置，例如：

$("#fm_regis").validate({
  rules :{
    name: {
      required: true,
    },
  },   
  errorLabelContainer: "#id-of-your-specific-place",
  // More of your code
})

jquery 验证：在自定义 div 中显示错误标签

jquery validation: display error label inside a custom div

jquery

jquery-validate