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

@Ruub：远程消息应该是一个函数，而远程消息在规则中只是一个用于检查的URL 例如：

$("#registratieform").validate({
    rules: {
        email: {
            required: true,
            email: true,
            remote: "includes/check_email.php"                    
        }
    },
    messages: {
        email: {
            required: "This field is required",
            email: "Please enter a valid email address",
            remote: function() { return $.validator.format("{0} is already taken", $("#email").val()) }
        },
    },
});

在服务器端（包括/ check_email.php）：

if (!isValidEmail($_REQUEST['email'])) {
        echo "false";
        exit;
    }

Answer 2

我找到了解决我们问题的方法，花了一天时间来解决所有问题，但没有人满意我并且学习了一些jqvalidator的源代码我发现它很容易实现它

   $("#myform").validate({
       rules: {
            somealiasname: {
                required: true,
                remote: {
                    url: "www.callthisurl.com/remote",
                    type: "GET",
                    success: function (data) {// Here we got an array of elements for example
                        var result = true,
                            validator = $("#myform").data("validator"), //here we get the validator for current form. We shure that validator is got because during initialization step the form had stored validator once.
                            element = $("#myform").find("input[name=somealiasname]"),
                            currentAlias = element.val(),
                            previous, errors, message, submitted;

                        element = element[0];
                        previous = validator.previousValue(element); // here we get the cached value of element in jqvalidation system

                        data.forEach(function (it) {//here we check if all alias is uniq for example
                            result = !result ? false : it.alias != currentAlias;
                        });

                        validator.settings.messages[element.name].remote = previous.originalMessage; // this code I found in the source code of validator (line 1339)

                        if (result) {
                            submitted = validator.formSubmitted;
                            validator.prepareElement(element);
                            validator.formSubmitted = submitted;
                            validator.successList.push(element);
                            delete validator.invalid[element.name];
                            validator.showErrors();
                        } else {
                            errors = {};
                            message = validator.defaultMessage(element, "remote");
                            errors[element.name] = previous.message = $.isFunction(message) ? message(value) : message;
                            validator.invalid[element.name] = true;
                            validator.showErrors(errors);
                        }

                        previous.valid = result;
                        validator.stopRequest(element, result);
                    }.bind(this)
                }
            }
        }

```

tadam - 一切都很完美！

此代码已使用jqvalidation 1.14.0进行测试

我希望，我可以帮助某人

Answer 3

您可以使用success选项。

如果指定，则显示错误标签以显示有效元素。如果给出了String，则将其作为类添加到标签中。如果给出了一个Function，则使用标签（作为jQuery对象）和验证的输入（作为DOM元素）调用它。标签可用于添加“ok！”等文本。

doc中的示例：将类“有效”添加到有效元素，通过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()

Answer 4

将以下代码替换为您的完整功能：

dataFilter: function (data) {
                        return 'false';// If email not exist
                        return 'true';// If email exist ( Display message on return true )
                    }

请检查这将有所帮助。

Answer 5

如果要使用Laravel，我觉得这很有用。关键是使用 dataFilter

email: {
   required: true,
   remote: {
       headers: {
           'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
       },
       type: "post",
       url: "existsEmail.php",
       data: {email: function() {
           return $('#email').val();
       }},
       dataFilter: function(response) {
           var data = JSON.parse(response);

           return data.success;
       },
   }

messages: {
    email: {
        required: "Email Required",
        remote: $.validator.format("Email Invalid"),
}

这是重要的状态为200（或无效）的返回，即使返回false。如果您设置其他状态，则不会发送（完全）对 dataFilter

的正确响应

public function existsEmailCloud(Request $request){
   $sEmail = strtolower($request->email);


   $result = GeneralFunctions::existsEmail($sEmail);


   if($result) {
       return Response::json([
           'success' => true,
       ], 200);
   } else {
       return Response::json([
           'success' => false,
       ], 200);
   }

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

5 个答案: