javascript - jQuery validation moves bootstrap button add-on -

i using jquery validation plugin , works great - however, on field using bootstrap button add-on, when required alert shown, button doesn't move text box - i've replicated issue here: jsfiddle

here 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 appreciated, thanks

it because label inserted validation plugin between input , span. can add label error message manually after div tag this:-

 <label for="txtclientcontract" generated="true" class="error"></label>  //          ^ id input  

check demo