输入字段内的 jQuery 验证错误消息在焦点处消失

Question

我在每个必填字段的输入字段中显示 jQuery 验证错误消息。当用户尝试输入有效的必需信息时，我无法弄清楚如何让消息消失。

例如，如果输入字段中出现错误消息“输入您的名字”，并且我尝试在文本输入字段中输入我的真实名字（如果是史蒂夫），则它从“输入您的史蒂夫”开始

当我输入真实信息时，如何让错误消息消失？

这里是jsfiddle

这是我的代码：

HTML

<form id="lead">
<input type="text" name="first_name">
<input type="text" name="last_name">
<input type="email" name="email">
<input type="submit">

jQuery

    $(function () {
    //Validation
    $('#lead').validate({
        rules: {
            first_name: {
                minlength: 2,
                required: true
            },
            last_name: {
                minlength: 2,
                required: true
            },
            email: {
                email: true,
                required: true
            }
        },
        errorPlacement: function (error, element) {
            element.val(error.text());
        },
        messages: {
            first_name: "Enter your first name",
            last_name: "Enter your last name",
            email: "Enter your email"
        },
        submitHandler: function (form) { // for demo
            alert('valid form submitted'); // for demo
            return false; // for demo
        }
    });

});

Answer 1

我认为您无法通过 jQuery Validate 中的这些确切设置获得所需的行为。

问题是你已经为你的名字输入设置了minlength: 2。在您提交表单之前，Validate 什么都不做。但是在第一次提交并触发错误后，它会重新评估每个击键的验证标准。因此，您在名字输入中键入“S”，这会触发验证，但由于 minlength

您可能更愿意为 jQuery Validate 设置顶级选项 onkeyup:false，但这并不能完全解决问题。

在这里看到它的不同工作方式：http://jsfiddle.net/ryleyb/3RBRp/8/

Answer 2

为什么不使用placeholders？

它们应该很好地满足您的目的