在 input-append (Twitter Bootstrap) 上使用 jQuery 验证

Question

我正在为一个网站使用Twitter Bootstrap，并且我们使用jquery.validate。

我有一个带有附加按钮的输入元素。这是我们js验证中的必填字段。

代码如下：

<div class="controls">
<div class="input-append">
    <input tabindex="1" name="url" class="input-large" id="url" type="text" placeholder="http://somewebsite.com" autocapitalize="off">
    <button class="btn" type="button" name="attach" id="attach" />Fetch</button>
</div>
</div>

验证错误类使用jquery验证规则，并在每个其他元素上完美地工作。但是看起来，错误的跨度似乎附加在输入元素之后，这在大多数情况下都是绝对可以的。但在此输入字段实例中，它会破坏显示，因为它会分离附加的按钮。

下面是我所指的图像（之前和之后） 我真的需要将不同的类应用于此元素的错误消息，但如果我不能弄清楚如何操作的话，就无法完成。

errorClass: "help-inline",
            errorElement: "span",
            highlight:function(element, errorClass, validClass) {
                $(element).parents('.control-group').addClass('error');
            },
            unhighlight: function(element, errorClass, validClass) {
                $(element).parents('.control-group').removeClass('error');
                $(element).parents('.control-group').addClass('success');
            }

对于输入字段，错误事件是：

url:{
required:true
},

并且消息是：

messages:{
url:{
    required:"Enter URL beginning with http"
},

- 422

Answer 1

如odupont所说，您可以添加自己的errorPlacement实现，但是给定的代码将不适用于表单中的普通输入字段。通过以下实现，错误位置将适用于本地输入字段和input-append字段！

errorPlacement: function (error, element) {
   if (element.parent().is('.input-append'))
      error.appendTo(element.parents(".controls:first"));
   else
      error.insertAfter(element);
}

- user579089

Answer 2

您可以使用errorPlacement选项。

errorPlacement: function (error, element) {
   error.appendTo(element.parents(".controls:first"));
}

在这个例子中，错误元素将被追加到父级 div 元素 .controls 中。

- odupont

Answer 3

正如user579089和odupont所说的一样！

我刚刚修复了这个问题，并跑到SO上检查是否有人被卡住了。这是我的代码：

  $("#myform").validate({ 
        highlight: function(label) {
            $(label).closest('.control-group').addClass('error');
        },
        errorPlacement: function (error, element) { 
             if (element.parent().hasClass("input-append")){
                error.insertAfter(element.parent());
             }else{
                error.insertAfter(element);
             } 
        },          
        onkeyup: false,
        onblur: false,
        success: function(label) {
            $(label).closest('.control-group').removeClass('error');
        } 
    });

- John N