jQuery Sprawdzanie poprawności na wejściu-dołączeniu (Twitter Bootstrap)

Question

Używam bootstrapu Twitter dla witryny, a używamy jquery.validate.

Mam element wejściowy z przyciskiem dołączonym do elementu wejściowego. Jest to pole wymagane w ramach sprawdzania poprawności js.

Kod jest:

<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> 

Validation klasa błędu wykorzystuje reguły sprawdzania poprawności jQuery i działa doskonale na każdym innym elemencie. Ale pozornie zakres błędu jest dołączany zaraz po elemencie wejściowym, co w większości przypadków jest absolutnie w porządku. Ale w tym przypadku w tym polu wejściowym powoduje zablokowanie wyświetlania, ponieważ odłącza on dołączony przycisk.

Poniżej jest obraz tego, co mam na myśli (przed i po) naprawdę trzeba zastosować inną klasę do komunikatu o błędzie dla tego jednego elementu, ale buggered jeśli mogę dowiedzieć się, jak to zrobić.

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'); 
      } 

W polu wejściowym zdarzenie błędu jest:

url:{ 
required:true 
}, 

i komunikat:

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

Answer 1

Można użyć opcji errorPlacement.

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

W tym przykładzie element błąd zostanie dołączony w div nadrzędnej .controls.

Answer 2

Zgodnie z informacją odupont można dodać własną implementację errorPlacement, ale podany kod nie będzie działać dla normalnych pól wejściowych w formularzu. W poniższej implementacji rozmieszczenie błędów będzie działać zarówno w natywnych polach wejściowych, jak iw polach input-append!

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

Answer 3

Dokładnie tak, jak powiedział użytkownik579089 i odupont!

Właśnie naprawiłem to i pobiegłem do SO, aby sprawdzić, czy ktoś się z tym nie zatrzymał. Oto mój kod:

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