Question

使用bootstrap时的JQuery Validate问题

我使用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>

验证将显示在col-xs-6文本字段的右侧，原始文本字段将被按下，布局将会失真。

例如

[      Text Field      ] [      Text Field      ]

如果验证它将变为

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

我想要的是验证消息显示在2个文本字段下面，即bootstrap

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

问题是我的代码也需要适用于不是bootstrap的普通div。

我为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'))将您的错误消息元素放在包含div元素的input 之外。我不清楚你真正想要什么，但根据你所展示的内容，只需使用默认的errorPlacement功能就可以将消息元素放在容器中并立即在每个input元素之后。由于您的错误消息是div，因此它应该已显示在每个input下的新行中。换句话说，完全删除errorPlacement选项，看看会发生什么。但是，我们完全不知道你的CSS是如何影响这一切的。

否则，您将不得不使用浏览器工具检查实时DOM，以查看插件插入消息的位置以及CSS正在执行的操作。然后，如果不正确，找出它需要的确切位置...然后相应地调整CSS和/或HTML。通过调整errorPlacement中的代码来修复动态HTML。

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

1 个答案: