アイコン内の入力フィールドのJqueryによる検証エラーメッセージの送信

Question

入力テキストボックス内のアイコン付きブートストラップを使用しています。この入力にも検証があります。検証の前に、すべてがページ上で大丈夫です。検証の後、下の画像に示すように、それはうんざりしてしまいます。あなたはこれについてアドバイスできますか？検証後

：検証前

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> 

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

}); 

ありがとうございました。

Answer 1

これは、使用するjQuery検証プラグインで、デフォルトで<label>タグを使用してエラーメッセージを表示するためです。 <span>タグとしてレンダリングすることを選択してください。ここで

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

ドキュメント： https://jqueryvalidation.org/validate/

ここでそれを試すためjsfiddle： https://jsfiddle.net/bq0e5f86/