jQuery Validate：验证后保留错误答案

【问题标题】：jQuery Validate: Retaining error after validationjQuery Validate：验证后保留错误
【发布时间】：2012-06-19 02:29:46
【问题描述】：

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

这是我的代码：

$(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."
            }
        },
    });
});

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

本质上，当用户提交表单时，如果电子邮件字段中没有数据，那么电子邮件的标签就会被错误替换。但是一旦它有有效的输入，我想放回原来的标签。

提前感谢您的任何建议，

【问题讨论】：

这可能是不可能的，但您可能会摆弄highlight 和unhighlight 函数，并从中保存旧标签，然后在unhighlight 上重新设置它。
感谢您的回复。我实际上制定了一个折衷方案，而不是用错误标签替换以前的标签，而是使用 error.appendTo(element.prev()) 和 errorElement: "span" 将跨度附加到该标签中。它不太理想，但至少当跨度出现时，错误代码是我想要的，当它消失时，标签保持不变。我只是这样做了，所以标签和错误像句子一样相互补充......例如，“电子邮件地址”“是必需的。”或“电子邮件地址”“格式不正确。” （PS：可悲的是，换行符似乎不起作用）
啊，这是一个不错的解决方案，我同意...我建议您发布自己问题的答案，并将其标记为已接受（这在 StackOverflow 上是 100% OK）。这样，发现此问题的任何其他人都会知道一个好的答案。
它不会让我早点这样做，但现在看来没问题。再次感谢您的帮助。

标签： javascript jquery forms validation

【解决方案1】：

我实际上制定了一个折衷方案，我没有用错误标签替换先前的标签，而是使用 error.appendTo(element.prev()) 和 errorElement: "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"
                    }
                },
            });
        });

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

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

【讨论】：

【解决方案2】：

你可以删除

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

消息应该出现在文本框旁边。

【讨论】：

这里的挑战是我希望它准确地出现在标签所在的位置——而不是文本框的旁边或下方。

【解决方案3】：

您可以尝试删除Child(label)，并在错误发生时附加一个新的。切换标签似乎有意义

【讨论】：

感谢您的回复。我的部分问题似乎是无法将相关代码放在错误清除时触发的函数中。