Javascript jQuery验证：验证后保留错误

我有一个简单的登录表单，当出现显示错误时，jqueryvalidate会替换字段标签。问题是，一旦清除错误，标签就会消失。我想找到一种方法恢复到以前标签的内容，或者在字段有效时重建该标签

这是我的密码：

$(document).ready(function(){
    $("#login").validate({
        errorPlacement: function(error, element) {
            element.prev().replaceWith(error);
        },
        rules: {
            "email": {
                required: true,
                email:true,
            },
            "password": {
                required: true,
                minlength: 6
            }
        },
        messages: {
            email: {
                required: "Please enter your email address.",
                email: "Please enter a <u>valid</u> email address"
            },
            password: {
                required: "Please enter your password.",
                minlength: "Please enter a password with 6 characters or more."
            }
        },
    });
});

$（文档）.ready（函数（）{
$（“#登录”）.validate({
errorPlacement:函数（错误，元素）{
元素.prev（）.replaceWith（错误）；
},
规则：{
“电子邮件”：{
要求：正确，
电子邮件：是的，
},
“密码”：{
要求：正确，
最小长度：6
}
},
信息：{
电邮：{
必填：“请输入您的电子邮件地址。”，
电子邮件：“请输入有效的电子邮件地址”
},
密码：{
必填：“请输入您的密码。”，
minlength:“请输入6个或更多字符的密码。”
}
},
});
});

以及HTML：

<form name="login" id="login" method="post" action="authenticate.php">
<p>
    <label for="email">Email Address:</label>
    <input type="text" name="email" id="email" class="required email" />
</p>
<p>
    <label for="password">Password:</label>
    <input type="password" name="password" id="password" class="required" />
</p>
<p>
    <input type="submit" value="Log In" id="submit" />
</p>

电邮地址：


密码：

本质上，当用户提交表单时，如果电子邮件字段中没有数据，则电子邮件标签将替换为错误。但是一旦它有了有效的输入，我想把原始标签放回去

提前感谢您的建议

Z

您可以尝试删除child（标签），并在错误出现时将新标签附加到该标签上。切换标签似乎使您可以删除

errorPlacement: function(error, element) {
         element.prev().replaceWith(error);
     }, 

---

而消息应该显示在文本框旁边。

我实际上想出了一个折衷办法，不使用错误标签替换以前的标签，而是使用error.appendTo（element.prev（））和errorElement:“span”在标签上附加一个span。以下是新代码：

            $(document).ready(function(){
            $("#login").validate({
                errorElement: "span",
                errorPlacement: function(error, element) {
                    error.appendTo(element.prev());
                    //element.prev().replaceWith(error);
                },
                rules: {
                    "email": {
                        required: true,
                        email:true,
                    },
                    "password": {
                        required: true,
                        minlength: 6
                    }
                },
                messages: {
                    email: {
                        required: " is Required",
                        email: " is Improperly Formatted"
                    },
                    password: {
                        required: " is Required",
                        minlength: " is not Long Enough"
                    }
                },
            });
        });

这不太理想，但至少当跨度出现时，错误代码是我想要的，当它消失时，标签保持不变。我只是让标签和错误像句子一样互相补充。。。例如，“电子邮件地址”是必需的。或者“电子邮件地址”格式不正确

感谢所有在这里做出贡献的人

---

Z

这里的挑战是，我希望它显示在标签的确切位置，而不是文本框的旁边或下面。感谢您的回复。我的部分问题似乎是无法将相关代码放置在错误清除时触发的函数中。这可能是不可能的，但您可能会摆弄

高亮显示

和

取消高亮显示

函数，并从那些保留旧标签的函数中，然后将其重新设置为

取消高亮

。感谢您的回复。事实上，我找到了一个折衷方案，即使用error.appendTo（element.prev（））和errorElement:“span”在标签中添加一个span，而不是用错误标签替换前面的标签。这不太理想，但至少当跨度出现时，错误代码是我想要的，当它消失时，标签保持不变。我只是让标签和错误像句子一样互相补充。。。例如，“电子邮件地址”是必需的。或者“电子邮件地址”的格式不正确。（PS：很遗憾，换行符似乎不起作用）啊，这是一个不错的解决方案，我同意。。。我建议你对自己的问题发表一个答案，并将其标记为已接受（这在StackOverflow上是100%确定的）。这样，其他任何发现这个问题的人都会知道一个好的答案。我不想早点这么做，但现在看起来没问题。再次感谢你的帮助。