Jquery Validation Moves Bootstrap Button Add-on

I am using the jQuery Validation plugin and it works great - however, on a field where I am using a bootstrap button add-on, when the required alert is shown, the button doesn't mo

Solution 1:

It is because the label inserted by validation plugin between input and span. You can add label for error message manually after div tag like this:-

 <label for="txtClientContract" generated="true" class="error"></label>
 //          ^ this is idfor input 

Check Demo

Solution 2:

This is how I fixed it:

$(".input-group").find("label.error").detach().insertAfter($(".input-group"));

Adding the above line of code before alert("not valid!"); solved your issue.

Here is the JSFiddle demo

Basically what this does is it finds the error message and moves it after the button group so as not to break the structure using JQuery.