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

发布时间：2020-12-14 22:37:38 所属栏目：资源来源：网络整理

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

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

在验证之前：

验证后：

HTML代码：


jquery代码：
$(document).ready(function() {

  $(".registrationForm").validate(

     {
        rules: {
            name : {
                required : true,minlength : 3
            },surname : {
                required : true,username : {
                required : true,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');
        }
     }
  );

});

谢谢你的帮助.


最佳答案
这是因为您使用的jQuery Validate插件使用< label>默认情况下用于呈现错误消息的标记.
选择将其渲染为< span>标签,它会工作.

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

这里的文档：
https://jqueryvalidation.org/validate/
这是一个尝试它的jsfiddle：
https://jsfiddle.net/bq0e5f86/
                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!