验证错误消息未正确显示

Question

我不知道如何解释它。所以只需查看下图。

我正在使用charishma Admin主题。从这里下载：https://github.com/usmanhalalit/charisma

我正在使用jquery.validate.1.11.1.js。您的任何努力将不胜感激。提前致谢..！！ 更新：

我看到添加的元素是标签。它似乎适用于文本框和选择，但对于复选框和无线电，它显示为abaove，因为此元素的大小小于文本框和选择。看下面的代码是生成的：

<div class="control-group">
  <label class="control-label">Checkboxes</label>
  <div class="controls">
    <label class="checkbox inline">
      <div class="checker" id="uniform-tnc">
        <span>
          <input type="checkbox" value="option1" name="tnc" id="tnc" style="opacity: 0;" class="alert-error">
          <label for="tnc" class="alert-error">Agree to our terms and conditions to register with us.</label>
        </span>
      </div> Option 1
    </label>
  </div>
</div>

除了复选框和收音机外，所有其他输入类型都可以。对于这些应该如下：

<div class="control-group">
  <label class="control-label">Checkboxes</label>
  <div class="controls">
    <label class="checkbox inline">
      <div class="checker" id="uniform-tnc">
        <span>
          <input type="checkbox" value="option1" name="tnc" id="tnc" style="opacity: 0;" class="alert-error">
        </span>
      </div> Option 1
      <label for="tnc" class="alert-error">Agree to our terms and conditions to register with us.</label>
    </label>
  </div>
</div>

Answer 1

我没有在你的OP中看到你的jQuery Validate插件的任何代码。我建议你创建一个完整和简明的问题演示，然后在你的OP中展示演示。

默认情况下，jQuery Validate插件只是在label元素之后立即插入input元素并带有错误。对于radio和checkbox类型，label会立即插入到群组中 first 之后。

由于这个label被挤满了，有三种方法可以解决这个问题......

1）编辑你的布局的HTML＆amp; CSS，以便您有更多空间容纳label。

2）编辑jQuery Validate插件的回调函数/选项，以便在元素为label或radio时以不同方式放置checkbox。

3）1＆amp;的某种组合2。

Answer 2

我通过添加errorPlacement参数来验证解决方案。以下是解决方案：

errorPlacement: function(error, element) {
  if (element.attr("name") == "tnc")
    error.appendTo($('#lbl-tnc'));
  else
    error.insertAfter(element);
}

我更改了HTML，如下所示：

<label class="checkbox inline" for="tnc" id="lbl-tnc">
  <input type="checkbox" name="tnc" id="tnc">I Agree to <a href="#">Terms & Conditions</a>
</label>