JQuery 使用 bootstrap col-xs 时验证问题

Question

JQuery 使用 bootstrap

时验证问题

我使用 jquery 验证，下面是我的代码

      errorElement: 'div',
        errorClass: 'has-error',
        errorPlacement: function(error, element) {
         error
            .css('background-color', '#000000')
          error.insertAfter(element.parent('div'));
        },
        highlight: function(element, errorClass, validClass) {
          $(element).addClass(errorClass).removeClass(validClass);
          $(element.form).find("label[for=" + element.id + "]")
            .addClass(errorClass);
        },
        unhighlight: function(element, errorClass, validClass) {
 $(element).removeClass(errorClass).addClass(validClass);
          $(element.form).find("label[for=" + element.id + "]")
            .removeClass(errorClass);
        }

上面代码的问题是因为

如果我像这样使用正常 div

<div class="input text required"><label for="my_pay">Basic Pay</label>
<input id="my_pay" name="my_pay" maxlength="64" type="text" />
</div>

它工作正常，验证消息出现在下面。

但是当我使用

<div class="row">

<div class="col-xs-4"><div class="input text required">
    <input id="name" name="name" maxlength="64" type="text" />
</div></div>

<div class="col-xs-4"><div class="input text required">
    <input id="weight" name="weight" maxlength="64" type="text" />
</div></div>

</div>

validation会出现在col-xs-6文本域的右边，原来的文本域会被下推，布局会扭曲。

例如例子

[      Text Field      ] [      Text Field      ]

如果验证它将变成

[      Text Field      ] validate message
 [      Text Field      ] validate message

我想要的是显示在 bootstrap

两个文本字段下方的验证消息

[      Text Field      ] [      Text Field      ] 
Validate Message
Validate Message

问题是我的代码也需要适用于正常的 div 而不是 bootstrap。

我bootstrap的字段是姓名和体重

感谢您的帮助！！

Answer 1

您的相关代码...

errorPlacement: function(error, element) {
    error.css('background-color', '#000000')
    error.insertAfter(element.parent('div'));
},

完全删除 error.css('background-color', '#000000')。您不应该在 errorPlacement 函数内部弄乱 CSS 。当您可以首先使用 CSS 指定此规则时，使用 jQuery 执行此操作甚至没有任何意义。
error.insertAfter(element.parent('div')) 将您的错误消息元素 放在包含您的 input 元素的 div 的 之外。我不清楚你真正想要什么，但根据你所展示的内容，只需使用默认的 errorPlacement 函数就会将消息元素 放在容器内 之后每个 input 元素。由于您的错误消息是 div，它应该已经出现在每个 input 下的新行中。换句话说，完全删除 errorPlacement 选项，看看会发生什么。但是，我们完全不知道您的 CSS 如何影响这一切。

否则，您将不得不使用浏览器工具检查实时 DOM，以查看插件在何处插入消息以及 CSS 在做什么。然后如果不正确，找出它需要的确切位置......然后相应地调整 CSS and/or HTML 。通过调整 errorPlacement.

中的代码来修复动态 HTML

JQuery 使用 bootstrap col-xs 时验证问题

JQuery Validate Issue when using bootstrap col-xs

javascript

jquery

css

twitter-bootstrap

jquery-validate