输入附加的jQuery验证(Twitter Bootstrap)

我正在为网站使用twitter bootstrap,我们使用 jquery.validate.

我有一个输入元素,其中按钮附加到input元素.这是我们的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,validClass) {
                $(element).parents('.control-group').removeClass('error');
                $(element).parents('.control-group').addClass('success');
            }

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

url:{
required:true
},

和消息是：

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

解决方法

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

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