Validating jQuery on input-append (Twitter Bootstrap)

Question

I use twitter bootstrap for the site and we use jquery.validate.

I have an input element with a button attached to an input element. This is a required field in our js check.

The code:

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

The validation class uses jquery validation rules and works great on every other element. But, it would seem, the range for the error is added immediately after the input element, which in most cases is absolutely normal. But in this case, it displays the display in this input field because it disconnects the added button.

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

 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, an error event:

 url:{ required:true }, 

and message:

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

Answer 1

As odupont said, you can add your own implementation of errorPlacement, but the specified code will not work for your regular input fields on the form. In the next implementation, error placement will work for both your own input fields and input / add 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 parameter.

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

In this example, an error element will be added to the parent div.controls.

Answer 3

Exactly as said by user579089 and odupont!

I just fixed this and ran to SO to see if he was stuck with it. Here is 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'); } });