अंदरूनी आइकन के साथ इनपुट फ़ील्ड की Jquery सत्यापन त्रुटि संदेश

Question

मैं इनपुट टेक्स्ट बॉक्स के अंदर आइकन के साथ बूटस्ट्रैप का उपयोग कर रहा हूं। इस इनपुट में सत्यापन भी है। सत्यापन से पहले, सभी पेज पर ठीक दिखता है। सत्यापन के बाद यह नीचे दी गई छवि पर दिखाए गए अनुसार गड़बड़ हो गया। क्या आप इस पर सलाह दे सकते हैं?

सत्यापन के बाद:

एचटीएमएल कोड:

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