Sprawdzanie poprawności pola wejściowego z ikoną nie działa płynnie

Question

Kiedy moja ikona jest wewnętrzna, wejście-lg wtedy, gdy klikam na polu, wygląda na ... Mam na myśli, że mój komentarz powinien tu być, ale nie powinien ikona większa. Potrzebuję komentarza, ale z pola ikon i pola wejściowego lg.

Oto mój kod demo:

$(document).ready(function() { 
 
    $('#contact-form').validate({ 
 
     rules: { 
 
      fullname: { 
 
       minlength: 4, 
 
       required: true 
 
      }, 
 
      username: { 
 
       required: true, 
 
       email: true 
 
      }, 
 
      password: { 
 
       minlength: 8, 
 
       required: true 
 
      }, 
 
      confirm_password: { 
 
       minlength: 8, 
 
       required: true 
 
      }, 
 
      mobile: { 
 
       minlength: 11, 
 
       required: true 
 
      } 
 
     }, 
 
     highlight: function (element) { 
 
      $(element).closest('.control-group').removeClass('success').addClass('error'); 
 
     }, 
 
     success: function (element) { 
 
      element.text('OK!').addClass('valid') 
 
       .closest('.control-group').removeClass('error').addClass('success'); 
 
     } 
 
    }); 
 
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js"></script> 
 
<div class="container"> 
 
    <form method="POST" class="form-horizontal" id="contact-form"> 
 
     <div class="control-group"> 
 
      <div class="controls"> 
 
       <div class="input-group input-group-lg"> 
 
        <span class="input-group-addon" id="sizing-addon1"> <span class="glyphicon glyphicon-user" aria-hidden="true"></span></span> 
 
        <input type="text" name="fullname" id="fullname" class="form-control" placeholder="Your name"> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <p class="help-block"></p> 
 

 
     <div class="control-group"> 
 
      <div class="controls"> 
 
       <div class="input-group input-group-lg"> 
 
        <span class="input-group-addon" id="sizing-addon1"> <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span></span> 
 
        <input type="email" name="username" id="username-reg" class="form-control" placeholder="Your email address"> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <p class="help-block"></p> 
 

 
     <div class="control-group"> 
 
      <div class="controls"> 
 
       <div class="input-group input-group-lg"> 
 
        <span class="input-group-addon" id="sizing-addon1"> <span class="glyphicon glyphicon-lock" aria-hidden="true"></span></span> 
 
        <input type="password" name="password" id="password" class="form-control" placeholder="Your password"> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <p class="help-block"></p> 
 

 
     <div class="control-group"> 
 
      <div class="controls"> 
 
       <div class="input-group input-group-lg"> 
 
        <span class="input-group-addon" id="sizing-addon1"> <span class="glyphicon glyphicon-lock" aria-hidden="true"></span></span> 
 
        <input type="password" name="confirm_password" id="repass" class="form-control" placeholder="Confirm your Password"> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <p class="help-block"></p> 
 

 
     <div class="control-group"> 
 
      <div class="controls"> 
 
       <div class="input-group input-group-lg"> 
 
        <span class="input-group-addon" id="sizing-addon1"> <span class="glyphicon glyphicon-phone" aria-hidden="true"></span></span> 
 
        <input type="text" name="mobile" id="phone" class="form-control" placeholder="Mobile Number"> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <p class="help-block"></p> 
 

 
    </form> 
 
</div>

muszę to tak:

Answer 1

użycie errorPlacement i insertAfter.

$('#contact-form').validate({   
    errorPlacement: function(error, element) { 
     error.insertAfter(element.parent()); 
    } 
}); 

FIDDLE

Również komunikaty niestandardowe można zrobić tak: -

$('#contact-form').validate({ 
    rules: { 
     fullname: { 
      minlength: 4, 
      required: true 
     } 
    }, 
    messages: { 
     fullname:{ 
       required: "Required input", 
       minlength: jQuery.validator.format("Too short: Minimum of {0} characters") 
     } 
    } 
}); 

FIDDLE