jQuery Validate + JSONP 跨域远程验证

Question

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

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

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

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

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

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

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

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

问这个问题已经很久了，但是还没有给出正确的答案。我遇到了同样的问题，不得不花费几个小时才能得到答案。因此，请在此处为可能遇到此问题的任何人留下完整的答案。

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

总结：

不需要成功子句。 您的回调函数应该显示错误。

    <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"
            });
    };
});

Answer 2

我知道我有点（太？）晚了，但这可能对其他人有所帮助...

问题是您的“成功”功能覆盖了默认的远程方法之一；你必须自己解决错误

validator.showErrors();

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

Answer 3

jQuery Validate API 文档写得不好，但似乎 PHP 页面必须仅以 true 或 false 响应，例如：

echo "false";