Jquery validation of input field with icon inside send error

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:

 

Before the validation:

 

 

 

The html code :

 

 

<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="Kullanici Adi" />

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

</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');

}

}

);

});