jQuery Validation on input -append (Twitter Bootstrap)

Я использую 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"
},