jQuery Validación en input-append (Twitter Bootstrap)

Question

Estoy usando twitter bootstrap para un sitio, y usamos jquery.validate.

Tengo un elemento de entrada con un botón adjunto al elemento de entrada. Este es un campo obligatorio dentro de nuestra validación js.

El código es: clase de error

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

Validación utiliza reglas de validación de jQuery y funciona perfectamente en todos los demás elementos. Pero aparentemente el lapso del error se agrega justo después del elemento de entrada, que en la mayoría de los casos es absolutamente correcto. Pero en este caso en este campo de entrada, levanta la pantalla, porque separa el botón adjunto.

A continuación se muestra la imagen de lo que quiero decir (antes y después) Es realmente necesario aplicar una clase diferente al mensaje de error para este uno de los elementos, pero buggered si puedo encontrar la manera.

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

Para el campo de entrada al evento de error es:

url:{ 
required:true 
}, 

y el mensaje es:

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

Answer 1

Puede utilizar la opción errorPlacement.

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

En este ejemplo, el elemento de error se adjunta en el div padre .Controls.

Answer 2

Como dice odupont puede agregar su propia implementación de errorPlacement, pero el código proporcionado no funcionará para sus campos de entrada normales en el formulario. Con la siguiente implementación, la ubicación del error funcionará tanto para los campos de entrada nativos como para los campos de entrada y anexión.

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

Answer 3

Exactamente como dice user579089 y odupont!

Lo he arreglado y corrí a SO para comprobar si alguien se quedó atascado. Aquí está mi código:

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