Jquery validation of input field with icon inside send error message

Question

I am using bootstrap with icon inside the input text box. This input also has validation. Before the validation, all looks ok on page. After validation it got messed up as shown at the image below. Can you please advice on this?

Before the validation:

After the validation :

The 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>

The 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');
        }
     }
  );

});

Thanks for your help.

Answer 1

This is because the jQuery Validate Plug-in you use, uses a <label> tag by default for rendering the error message. Choose to render it as a <span> Tag and it will work.

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

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

Here a jsfiddle for trying it out: https://jsfiddle.net/bq0e5f86/