带有图标的输入字段的Jquery验证发送错误消息

Posted 2023-02-22

【中文标题】带有图标的输入字段的Jquery验证发送错误消息

【英文标题】：Jquery validation of input field with icon inside send error message

【发布时间】：2017-01-11 07:50:04

【问题描述】：

我在输入文本框中使用带有图标的引导程序。这个输入也有验证。在验证之前，页面上看起来一切正常。验证后它变得一团糟，如下图所示。可以请教一下吗？

验证前：

验证后：

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

);

感谢您的帮助。

【问题讨论】：

您有指向此页面的活动链接还是仅在您的本地计算机上？

你可以为代码创建 jsfiddle 吗？

然后让代码上线

在线代码：jsfiddle.net/dedee/ursgfcvw/2

【参考方案1】：

这是因为您使用的 jQuery Validate 插件默认使用<label> 标签来呈现错误消息。 选择将其呈现为<span> 标签，它将起作用。

$(".registrationForm").validate(

   errorElement: "span"
);

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

这里有一个用于尝试的 jsfiddle： https://jsfiddle.net/bq0e5f86/