如何在 jquery 验证器中显示“看起来不错”的消息？答案

【问题标题】：how to show a 'looks good' message in jquery validator?如何在 jquery 验证器中显示“看起来不错”的消息？
【发布时间】：2012-04-14 20:07:04
【问题描述】：

我想知道这样的事情是否可行

.validate({
    rules: {
        email: {
                    required: true,
                    email: true
                }
            },

messages: {
    email: {
            required: "<?php echo get_texto_clave('error_validate_empty'); ?>",
            email: 'Please enter a valid email address',
            whenFieldIsValid: 'looks good'
        }
    }
});

显示消息，而不是错误，而是确认输入有效，

我该怎么做？

【问题讨论】：

标签： javascript jquery jquery-plugins jquery-validate

【解决方案1】：

您可以使用validClass option 来编写此功能。当输入有效时，插件会为该元素添加一个指定的类。

在每个输入之后插入一个隐藏的 div：

<input id="exampleinput" /><div class="correctmessage">Looks Good</div>

隐藏：

.correctmessage{ display: none; }

在您的验证语句中，包括validClass 选项以及onkeyup 和onclick，如果您希望消息在表单发生更改时显示：

.validate({
    validClass: "success",
    onkeyup: true,
    onclick: true
})

然后 CSS 在 success 类之后显示 correctmessage 类的第一个元素（特异性应覆盖其他 CSS 块）：

.success + .correctmessage{ display: block;}

display: inline 也是有效的。

【讨论】：

如果表单有效，它会被提交（或任何您想要的操作）。当表单无效时，它会自动将错误消息添加到无效输入中。这使您可以在所有成功的输入上添加成功消息。
如果这不是你的意思，你能改写问题吗？我添加了如何在您进行更改时验证每个字段。
我的意思是在你的例子中。对于我所看到的。你在这些领域没有任何区别。假设有 4 个字段，您想分别验证它们。也许你会有 3 个“看起来不错”但 1 个“修复字段”。如果你知道我的意思
这将完成。首先，验证插件适用于整个表单。其次，您只需在 each 元素之后添加类“correctmessage”的 div，您希望消息在正确验证时出现。它适用于您想要的任意数量的元素。
完全正确。只是我不知道 CSS 中的 + 选择器，并一直认为它们都会被应用（而不是单独应用）。非常感谢

【解决方案2】：

通过稍微修改“highlight”和“unhighlight”选项，您可以在提交表单之前轻松标记每个有效字段：

$(form).validate({
    highlight: function(element) {
        $(element).removeClass("valid").addClass("error");
    },
    unhighlight: function(element) {
        $(element).removeClass("error").addClass("valid");
    }
})

您可以在每次输入后添加一个隐藏元素，并通过 css 切换它的可见性（或显示）：

.valid_message { visibility: hidden; }
.valid + .valid_message { visibility: visible; }

【讨论】：