jQuery validation moves bootstrap button add-on

Question

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 move with the text box - I've replicated the issue here: jsfiddle

Here is the html:

<form id="frmPO" action="" method="get" runat="server">
<div class="form-group input-sm">
            <div class="row">
                <div class="col-sm-6">
                    <label for="txtClientContract">
                        Client Contract</label>
                    <div class="input-group">
                        <input type="text" class="form-control" id="txtClientContract" runat="server" required/>
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="button" id="btnClientContracts" >
                                ...</button>
                        </span>
                    </div>
                  </br>
           <div class="row">
                <div class="form-group col-sm-4">
                    <button id="btnSavePO" type="button" class="btn btn-default">
                        Create Purchase Order</button>
                </div>
            </div>
                </div>
  </div>
  </form>

Any help would be much appreciated, thanks

Answer 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 id for input 

Check Demo

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