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

Question

我在输入文本框中使用带有图标的bootstrap。此输入也有验证。在验证之前，所有内容都在页面上显示正常。验证后，它变得混乱，如下图所示。你能就此提出建议吗？

验证前：

验证后：

html代码：

var certStore = new X509Store(StoreName.My, StoreLocation.CurrentUser);
certStore.Open(OpenFlags.ReadOnly);
certCollection = certStore.Certificates.Find(
    X509FindType.FindByThumbprint,
    // Replace below with your cert's thumbprint
    "E661583E8FABEF4C0BEF694CBC41C28FB81CD870",
    false);

// Get the first cert with the thumbprint
if (certCollection.Count > 0)
{
    X509Certificate2 cert = certCollection[0];
}

certStore.Close();

jquery代码：

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

感谢您的帮助。

Answer 1

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

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

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

这是一个尝试它的jsfiddle： https://jsfiddle.net/bq0e5f86/