jQuery Validation on input-append ( Twitter Bootstrap )

Question

I am using twitter bootstrap for a site, and we use jquery.validate.

I have a input element with button appended to input element. This is a required field within our js validation.

The code is:

<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 error class uses jquery validation rules and works perfectly on every other element. But seemingly the span for the error is appended right after the input element, which in most cases is absolutely fine. But in this instance on this input field, it cocks the display up, because it detaches the appended button.

Below is image of what I mean ( before and after ) I really need to apply a different class to the error message for this one element, but buggered if I can figure out how.

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

For the input field the error event is:

url:{
required:true
},

and message is:

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

Answer 1

As said by odupont you can add your own implementation of errorPlacement, but the code given will not work for your normal input-fields in the form. With the following implementation the error placement will work for both native input fields and input-append fields!

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

Answer 2

You can use the errorPlacement option.

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

In this example, the error element will be appended in the parent div .controls.

Answer 3

Exactly as said by user579089 and odupont!

I've just fixed that and ran to SO to check if someone got stuck with it. Here's my code:

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