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 Validate插件默认使用<label>标记来呈现错误消息。 选择将其渲染为<span>标记，它将起作用。

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

这里的文档： https://jqueryvalidation.org/validate/

这里想出来一个的jsfiddle： https://jsfiddle.net/bq0e5f86/