Sprawdzanie poprawności pola wejściowego z ikoną wewnątrz wysyłania komunikatu o błędzie

Question

Używam programu ładującego z ikoną wewnątrz pola tekstowego wprowadzania. To wejście ma również walidację. Przed sprawdzeniem poprawności wszystko wygląda dobrze na stronie. Po sprawdzeniu poprawności została pomieszana, jak pokazano na poniższym obrazku. Czy możesz doradzić w tej sprawie?

Przed walidacji

Po walidacji

kod HTML:

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

Kod jQuery:

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

}); 

Dzięki za pomoc.

Answer 1

Dzieje się tak dlatego, że używana wtyczka walidacji jQuery Validate domyślnie używa znacznika <label> do renderowania komunikatu o błędzie. Wybierz, aby renderować go jako znacznik <span> i będzie działać.

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

Oto dokumentacja: https://jqueryvalidation.org/validate/

Tutaj jsfiddle dla próbuje ją: https://jsfiddle.net/bq0e5f86/