输入附加的 jQuery 验证（Twitter Bootstrap）答案

【问题标题】：jQuery Validation on input-append ( Twitter Bootstrap )输入附加的 jQuery 验证（Twitter Bootstrap）
【发布时间】：2012-07-06 04:38:13
【问题描述】：

我正在为一个网站使用 twitter 引导程序，我们使用 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"
},

【问题讨论】：

标签： jquery validation jquery-validate twitter-bootstrap

【解决方案1】：

正如 odupont 所说，您可以添加自己的 errorPlacement 实现，但给出的代码不适用于表单中的正常输入字段。通过以下实现，错误放置将适用于本机输入字段和输入附加字段！

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

【讨论】：

【解决方案2】：

您可以使用 errorPlacement 选项。

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

在此示例中，错误元素将附加在父 div .controls 中。

【讨论】：

【解决方案3】：

正如 user579089 和 odupont 所说！

我刚刚解决了这个问题，然后跑去查看是否有人被卡住了。这是我的代码：

  $("#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');
        } 
    });

【讨论】：