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

Question

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

.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'
        }
    }
});

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

我该怎么做？

Answer 1

您可以使用该validClass 选项来编写此功能。当输入有效时，插件将向该元素添加指定的类。

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

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

隐藏：

.correctmessage{ display: none; }

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

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

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

.success + .correctmessage{ display: block;}

display: inline也是有效的。

Answer 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; }