jQuery Convalida su input-append (Twitter Bootstrap)

Question

Sto usando twitter bootstrap per un sito e usiamo jquery.validate.

Ho un elemento di input con il pulsante aggiunto all'elemento di input. Questo è un campo obbligatorio all'interno della nostra validazione js.

Il codice è:

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

convalida classe di errore utilizza regole di convalida jQuery e funziona perfettamente su ogni altro elemento. Ma apparentemente l'intervallo per l'errore viene aggiunto subito dopo l'elemento di input, che nella maggior parte dei casi è assolutamente soddisfacente. Ma in questo caso su questo campo di input, blocca la visualizzazione, perché scollega il pulsante aggiunto.

seguito è un'immagine di ciò che intendo (prima e dopo) ho davvero bisogno di applicare una classe diversa al messaggio di errore per questo elemento, ma inculata se io riesco a capire come.

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

Per il campo di input l'evento di errore è:

url:{ 
required:true 
}, 

e il messaggio è:

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

Answer 1

È possibile utilizzare l'opzione errorPlacement.

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

In questo esempio, l'elemento di errore sarà allegato nel div genitore .Controls.

Answer 2

Come detto da odupont è possibile aggiungere la propria implementazione di errorPlacement, ma il codice fornito non funzionerà per i normali campi di input nel modulo. Con la seguente implementazione il posizionamento degli errori funzionerà sia per i campi di input nativi che per i campi di input-append!

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

Answer 3

Esattamente come detto dall'utente579089 e odupont!

L'ho appena risolto e sono andato a SO per verificare se qualcuno si è bloccato con esso. Qui è il mio codice:

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