Question

我在使用jQuery Validate和跨域远程验证时遇到问题。我的情况是：

PhoneGap移动应用
远程服务器上的PHP脚本
jQuery 1.9.1
jQuery Mobile 1.4.2作为界面框架
jQuery验证1.12.0作为表单验证插件

为了与服务器交互，我使用jQuery Ajax调用和JSONP作为跨域通信技术。我必须使用远程规则验证某些表单字段，但由于这些调用位于另一个域（从应用程序到服务器），因此我遇到了响应格式的问题。使用JSONP我不能返回简单的“TRUE”或“FALSE”，而是返回JSONP格式的数据。

从服务器端我有一个返回JSON格式数据的PHP函数：

if (.....)    
    $return["Result"] = TRUE;    
else
    $return["Result"] = FALSE;

header('Content-type: application/json');
echo $jsoncallback . "(" . json_encode(return) . ")";

从客户端我有这个jQuery Validate代码：

rules: {
    'email': {
        required: true,
        remote: {
            type: 'post',
            url: 'http://www.myurl.com/mypage.php',
            data: {
                email: function() {
                    return $('#email').val();
                }
            },
            dataType: 'jsonp',
            jsonp: 'jsoncallback',
            success: function(data, status) {
                if (data.Result === false)
                    return false;
                else
                    return true;
            }
        }
    }
},
messages: {
    'email': {
        required: 'message 1',
        remote: 'message 2'
    }
}

上述代码在传递远程验证时似乎工作正常，但在失败时则不行。如果我在“成功”中发出这样的提醒：

alert(data.Result);

它始终返回正确的值，但代码似乎一直在继续，并且它不会打印错误消息。

有没有办法使用jQuery Validate来使用远程规则和JSONP验证字段？

提前致谢。

Answer 1

jQuery Validate API文档编写得很糟糕，但似乎PHP页面必须仅响应true或false，例如：

echo "false";

Answer 2

我知道我有点（太？）迟到了，但它可能对其他人有帮助......

问题是你的“成功”函数会覆盖远程方法的默认函数;

你自己必须犯错误

validator.showErrors();

来自您的成功函数，前提是您保存了验证器对象（var validator = $.validate({ ... })）。

Answer 3

自问这个问题以来已经很久了，但还没有给出正确答案。我遇到了同样的问题，不得不花费超过几个小时来得到答案。所以，请为可能遇到此问题的人留下完整的答案。

你不需要成功功能因为它没有被执行所以不应该给它。相反，你必须在你的回调函数中显示错误，就像给出了一个答案。即使这表明可能的解决方案，但它没有给出明确的示例，并且告诉您不需要成功条款。

要点：

不需要成功条款。您的回调函数应显示错误。

    <script type="text/javascript">
$().ready(function() {

    validator = $("#registerForm").validate({
        onkeyup: false,
        rules: {
            name: {
                required: true,
                minlength: 3
            },
            email: {
                required: true,
                email: true,
                remote: {
                    type: 'get',
                    url: 'http://www.myurl.com/checkemail',
                    data: {
                        email: function() {
                            return $('#email').val();
                        }
                    },
                    dataType: 'jsonp',
                    jsonp: 'myCallback'
                }
            },
            password: {
                required: true,
                minlength: 6
            }


        }
    });
    myCallback = function(data) {
        console.log("myCallback data is :" + data);
        if (data !== "true")
            validator.showErrors({
                "email": "This email is already used"
            });
    };
});

jQuery Validate + JSONP跨域远程验证

3 个答案: