jQuery验证程序表单:完成远程电子邮件验证后，如何访问表单操作 [英] jquery validator form: how to access form action, after the completion of a remote email validation

问题描述

历史记录:我以前是在

History: I started this issue off previously in this thread. I spent sometime trying to get the remote validation working so I refused to believe that was what was causing me grief.

当前::我正在使用jQuery Validator，并且我已将js更新为1.14.0版.此过程正在顺利进行.所有字段都经过检查和验证，我什至添加了一些额外的检查来帮助我确定问题:

Present: I am using jQuery Validator and I have updated the js to version 1.14.0. This process is working smoothly. All fields are being checked and validated, I even added few extra checks to help me identify issues:

invalidHandler和$("#submitBTN").click()，如下所示.

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

Both of these options would report back if the validation failed, and the button also reported passed validations by calling $(form).valid();

我有一个远程验证，它正在验证电子邮件地址，检查该地址是否已存在于数据库中.这是工作.我通过帖子提交了此请求.我应该使用替代技术吗?我之所以这样说，是因为没有提交验证后的表格.

I have a remote validation which is verifying the email address, checking to see if it is already in the database. It is working. I submit this request using a post. Should I be using an alternate technique? I say this because the post of the form upon validation is not being submitted.

我什至没有将它添加到submitHandler内，但是如果我注释掉了远程支票，我就可以访问submitHandler并处理了表单操作.

I do not even make it inside of submitHandler but if I comment out the remote check I am able to access submitHandler and the form action is processed.

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

I have reviewed jQuery Validation Remote rules but it is very simply laid out so what have I done incorrectly?

这是我的html表单代码:

Here is my html form code:

<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进行调试):

Here is my jQuery Validation (Note I use a mix of console.log & alert for debugging):

$(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验证:

Here is my button js validation:

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

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

Here is my simple php validation script that the after the form is validated I can read it:

var_dump($_POST);

启用了远程部分的验证:

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

When I press submit the alert reports:

Valid: true.

控制台将报告电子邮件地址的验证帖子.什么也没有发生，也没有报告.该页面保留在表单上.

The console reports the validation post of the email address. Nothing else occurs, or is reported. The page remains on the form.

禁用/注释掉远程部分的验证:

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

If I comment out the remote validation section completely:

我查看以下警报:

Valid: true&& form submitted

Valid: true && form submitted

后跟$ _POST的var_dump.显示表单操作已完成.

Followed by the var_dump of the $_POST. Which displays that the form action has been completed.

任何有关如何使它工作的建议将不胜感激！！

Any suggestions on how I can get this to work would be greatly appreciated?!

更新

远程检查几乎返回以下内容:

the remote check pretty much returns the following:

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

如果返回true，则结果将成为错误消息1.

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

推荐答案

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

Your server-side code should look more like this...

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

如果返回true，结果将变为错误消息1.

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

这是因为true是布尔值(1)，并且插件需要一个字符串.从字面上看，不是"true"(字符串)的任何 都将被视为验证失败，并且会显示一条错误消息:

That is because the true is a boolean (1), and the plugin is expecting a string. Literally, anything that is not a "true" (string), is considered failed validation and will give you an error message:

• 如果响应为"false"，undefined或null，则您会收到一般错误消息.

• If the response is "false", undefined, or null, then you get the generic error message.

如果响应为"true"，则表明您已通过验证并且未显示任何消息.

If the response is "true", then you've passed validation and no message is displayed.

如果响应为其他响应，则该响应将成为错误消息字符串.

If the response is anything else, that response becomes the error message string.

这篇关于jQuery验证程序表单:完成远程电子邮件验证后，如何访问表单操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！