jQuery 验证表单远程规则，成功消息

Question

我正在对我的注册表单使用 jquery 验证，它运行良好，但我遇到了问题。我检查电子邮件是否存在，如果电子邮件确实存在，我会收到一条错误消息。现在我想编辑这个，所以，如果电子邮件可以免费使用的话。错误消息将更改为:此电子邮件可以免费使用。

$(document).ready(function(){
    $("#registratieform").validate({
        rules: {
            email: {
                required: true,
                email: true,
                remote: {
                    url: "includes/check_email.php",
                    type: "post",
                    complete: function(data){
                        if( data.responseText == "false" ) {
                            alert("Free");
                          }
                     }
                },
            },
        },

        messages: {
            email: {
                required: "This field is required",
                email: "Please enter a valid email address",
                remote: jQuery.format("{0} is already taken")
            },
        },
    });
});

警报有效，但此消息必须出现在错误所在的标签中。这可能吗？

Answer 1

您可以使用成功选项。

如果指定，将显示错误标签以显示有效元素。如果给出了字符串，则会将其作为类添加到标签中。如果给定了一个函数，则使用标签(作为 jQuery 对象)和经过验证的输入(作为 DOM 元素)来调用它。该标签可用于添加“ok!”等文本。

文档中的示例:向有效元素添加“valid”类，通过 CSS 设置样式，并添加文本“Ok!”。

$("#myform").validate({
    success: function(label) {
        label.addClass("valid").text("Ok!")
    },
    submitHandler: function() { alert("Submitted!") }
});

在您的代码中:

$(document).ready(function(){
    $("#registratieform").validate({
        rules: {
            email: {
                required: true,
                email: true,
                remote: {
                    url: "includes/check_email.php",
                    type: "post",
                    complete: function(data){
                        if( data.responseText == "false" ) {
                            alert("Free");
                          }
                     }
                },
            },
        },

        messages: {
            email: {
                required: "This field is required",
                email: "Please enter a valid email address",
                remote: jQuery.format("{0} is already taken")
            },
        },

        success: function(e) {
            // Remove error message
            // Add success message
        },
    });
});

我建议阅读此内容:.validate()