Checking input field with icon does not work smoothly

Question

When my icon is an internal input-lg, then when I click on the field, it looks ... I mean that my comment should be here, but it should not enlarge the icon. I need a comment, but from the icon and input field lg.

Here is my demo code:

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

I need it like this:

Answer 1

use errorPlacement and insertAfter .

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

Fiddle

In addition, custom messages can be performed as follows: -

 $('#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