Jquery validation of input field with icon inside send error message

Question

I am using bootstrap with an icon inside an input text box. This entry also has validation. Before checking, everything looks fine on the page. After checking, it got messed up, as shown in the image below. Could you advise this?

Before checking:

After checking:

Html code:

<form:form commandName="user" action="${actionURL}" method="post" cssClass="registrationForm"> <div class="form-group has-feedback"> <form:input path="name" type="text" cssClass="form-control" placeholder="Ad" /> <span class="glyphicon glyphicon-user form-control-feedback"></span> <form:errors path="name"/> </div> <div class="form-group has-feedback"> <form:input path="surname" type="text" cssClass="form-control" placeholder="Soyad" /> <span class="glyphicon glyphicon-user form-control-feedback"></span> <form:errors path="surname"/> </div> <div class="form-group has-feedback"> <form:input path="username" type="text" cssClass="form-control" placeholder="Kullanıcı Adı" /> <span class="glyphicon glyphicon-user form-control-feedback"></span> <form:errors path="username"/> </div> <div class="form-group has-feedback"> <form:input path="email" type="email" cssClass="form-control" placeholder="Email" /> <span class="glyphicon glyphicon-envelope form-control-feedback"></span> <form:errors path="email"/> </div> <div class="form-group has-feedback"> <form:password path="password" cssClass="form-control" placeholder="Parola" /> <span class="glyphicon glyphicon-lock form-control-feedback"></span> <form:errors path="password"/> </div> <div class="form-group has-feedback"> <input type="password" class="form-control" placeholder="Parola(Tekrar)" name="password_again" id="password_again"> <span class="glyphicon glyphicon-log-in form-control-feedback"></span> </div> <div class="row"> <div class="col-xs-12"> <input type="submit" class="btn btn-primary btn-block btn-flat" value="Kaydet"/> </div> <!-- /.col --> </div> </form:form> 

Jquery code:

 $(document).ready(function() { $(".registrationForm").validate( { rules: { name : { required : true, minlength : 3 }, surname : { required : true, minlength : 3 }, username : { required : true, minlength : 3 }, email : { required : true, email : true }, password : { required : true, minlength : 5 }, password_again : { required : true, minlength : 5, equalTo : "#password" } }, highlight : function(element) { $(element).closest('.form-group, .has-feedback').removeClass('has-success').addClass('has-error'); }, unhighlight : function(element) { $(element).closest('.form-group, .has-feedback').removeClass('has-error').addClass('has-success'); } } ); }); 

Thank you for your help.

Answer 1

This is because the jQuery Validate plugin you are using uses the default <label> tag to display an error message. Select the rendering as the <span> tag and it will work.

 $(".registrationForm").validate( { errorElement: "span" }); 

Here's the documentation: https://jqueryvalidation.org/validate/

Here's the jsfiddle for testing: https://jsfiddle.net/bq0e5f86/