dedee dedee - 3 months ago 52
HTML Question

Jquery validation of input field with icon inside send error message

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:

enter image description here

After the validation :

enter image description here

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

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/