jquery validator form: 如何在完成远程电子邮件验证后访问表单操作

Question

历史： 我之前在 this thread 开始这个问题。我花了一些时间尝试让远程验证正常工作，所以我拒绝相信这就是让我悲伤的原因。

现在： 我正在使用 jQuery Validator 并且我已经将 js 更新到版本 1.14.0。这个过程进行得很顺利。所有字段都经过检查和验证，我什至添加了一些额外的检查来帮助我识别问题：

invalidHandler 和 $("#submitBTN").click()，详情如下。

如果验证失败，这两个选项都会返回报告，并且按钮还会通过调用 $(form).valid();

报告通过验证

我有一个远程验证，它正在验证电子邮件地址，检查它是否已经在数据库中。这是工作。我使用 post 提交此请求。我应该使用替代技术吗？我这样说是因为未提交验证时表单的post。

我什至没有在 submitHandler 中创建它，但如果我注释掉远程检查，我就可以访问 submitHandler 并且处理表单操作。

我已经查看了 jQuery Validation Remote 规则，但它的布局非常简单，我做错了什么？

这是我的 html 表单代码：

<form  id="signup_form" name="signup_form"  method="post" action="registration">  
  <h2>E-MAIL ADDRESS</h2>
  <input value="<?=$uEmail?>" type="text" name="signup_email" id="signup_email" /><br />

  <h2>PASSWORD</h2>
  <input type="password" name="requiredpWord" id="requiredpWord"><br />

  <h2>CONFIRM PASSWORD</h2>
  <input type="password" name="requiredcpWord" id="requiredcpWord"><br />

  <button id="submitBTN" type="submit" value="COMPLETE SIGNUP">COMPLETE SIGN UP</button>
</form>

这是我的 jQuery 验证（注意我混合使用 console.log 和 alert 进行调试）：

$(function() {
    $("#signup_form").validate({
        rules: {
            signup_email: {
                email: true,
                required: true,
                remote: { 
                    type: 'post',
                    url: 'registration/isEmailAvailable',
                    data: {
                        email:
                            function() {
                                 // console.log(data);
                                return $( "#signup_email" ).val();
                            }
                    }
                }
            },
            requiredpWord: {
                required: true,
                minlength: 8
            },
            requiredcpWord: {
                equalTo: "#requiredpWord"
            }
        },
       messages: {
            signup_email: {
                required: "Please provide an email",
                email: "Please enter a valid email address"//,
            },
            requiredpWord: {
                required: "Please provide a password.",
                minlength: "Your password must be at least 8 characters long"
            },
            requiredcpWord: "Your passwords do not match."
        },
        invalidHandler: 
            function(form, validator) {
                var errors = validator.numberOfInvalids();
                if (errors) {
                    var message = errors == 1
                    ? 'Please correct the following error:\n'
                    : 'Please correct the following ' + errors + ' errors.\n';
                    var errors = "";
                    if (validator.errorList.length > 0) {
                        for (x=0;x<validator.errorList.length;x++) {
                            errors += "\n\u25CF " + validator.errorList[x].message;
                        }
                    }
                    console.log(message + errors);
                }
                validator.focusInvalid();
            },
        //added this to see if the form would post, did not change it
        submitHandler: 
            function(form) {
                alert("form submitted");
                // do other things for a valid form
                form.submit();
            }
    });
})

这是我的按钮 js 验证：

$( "#submitBTN" ).click(function() {
  alert( "Valid: " + $("#signup_form").valid() );
});

这是我的简单 php 验证脚本，在验证表单后我可以阅读它：

var_dump($_POST);

启用远程部分的验证：

当我按下提交警报报告时：

Valid: true。

控制台报告电子邮件地址的验证 post。没有其他情况发生或报告。该页面保留在表单上。

远程部分验证 Disabled/Commented 输出：

如果我完全注释掉远程验证部分：

我查看了以下警报：

Valid: true && form submitted

后面是$_POST的var_dump。其中显示表单操作已完成。

如有任何关于如何让它工作的建议，我将不胜感激？！

更新

远程检查几乎returns以下内容：

if(!$userHandler->isEmailAvailable($email)){
    echo json_encode("Email Address is already registered: ".$email);
}else{
    echo false;
}
exit;

如果返回 true，则结果变为错误消息 1。

Answer 1

您的服务器端代码应该更像这样...

if (!$userHandler->isEmailAvailable($email)) {
    // failed validation
    echo json_encode("Email Address is already registered: " . $email); 
} else {
    // passed validation
    echo "true"; 
}
exit;

If a true is returned the result becomes the error message, 1.

那是因为 true 是一个布尔值 (1)，而插件需要一个字符串。从字面上看，任何不是 "true"（字符串）的东西，都被认为是验证失败，并会给你一条错误消息：

如果响应是 "false"、undefined 或 null，则会收到一般错误消息。
如果响应为"true"，则您已通过验证，不会显示任何消息。
如果响应是其他内容，则该响应将成为错误消息字符串。

jquery validator form: 如何在完成远程电子邮件验证后访问表单操作

jquery validator form: how to access form action, after the completion of a remote email validation

jquery

jquery-validate