JQuery 使用引导 col-x 时验证问题

JQuery Validate Issue when using bootstrap col-xs

本文关键字：验证 问题 col-x JQuery      更新时间：2023-09-26

JQuery 使用引导程序时出现的问题

我使用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 个文本字段的下方

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

问题是我的代码还需要适用于非引导程序的普通div。

我用于引导的字段是名称和权重

感谢您的帮助！！

您的相关代码...

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

  1. 完全删除error.css('background-color', '#000000')。 您不应该从errorPlacement函数内部弄乱CSS。 当您可以使用CSS指定此规则时，使用jQuery执行此操作甚至没有任何意义。

  2. error.insertAfter(element.parent('div'))将错误消息元素放在包含input元素的div之外。 我不清楚你真正想要什么，但根据你展示的内容，简单地使用默认的errorPlacement函数会将消息元素放在容器内，并紧跟在每个input元素之后。 由于您的错误消息是 div ，它应该已经出现在每个input下的新行上。 换句话说，完全删除errorPlacement选项，看看会发生什么。 但是，我们完全不知道您的CSS如何影响这一切。

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

相关文章：