Question

好的，我放弃了。在尝试了内联函数，回调，返回参数的无穷无尽的排列之后，我仍然无法按照我的意愿行事。任何帮助将不胜感激。

当前状态：除“checkEmail”错误消息外，一切正常。 javascript弹出窗口向用户传达正确的消息，但该字段不会显示任何错误消息，处理程序返回true或false。

期望的结果是，如果来自AJAX调用的JSON有效负载不是200，则弹出Javascript警报并使用相应的错误消息将该字段突出显示为无效。目前，它会弹出警报，但不会将该字段标记为无效。

（抱歉，这是jQuery 1.7 + jquery.validation插件）

JSON响应：

我们的JSON响应有效负载如下所示：

{"message": "Email is not in use.", "code": 200, "email": "test-39485787@mailinator.com"}

或

{"message": "Duplicate email address detected", "code": 401}

代码

<html>

<head>
<script>

// You'd think this should be false, but no
// Also it apparently needs to be a quoted 
// string: http://stackoverflow.com/a/11496502/814669
var checkEmailStatus = "true";

// Success Handling
checkEmailSuccess = function(data, textStatus, jqXHR) {
    checkEmailStatus = "true";
    switch (data.code) {
        case 200:
            checkEmailStatus = "false"; // Nothing set here matters
            return false; // Return valued from here don't matter
        case 401:
            alert("Sorry, our system has detected that an account with this email address already exists.");
            break;
        case undefined:
            alert("An undefined error occurred.");
            break;
        default:
            alert("An undefined error occurred.");
            break;
    }
    return checkEmailStatus;
};


// Error Handling
checkEmailError = function(jqXHR, textStatus, errorThrown) {
    if (jqXHR.status == 404) {
        alert("Could not find the API Server (404). We apologize for the inconvenience.");
    } else {
        alert("Terrible things have happened" + textStatus);
    }
    return false;
};


// The Validator
jQuery.validator.addMethod("checkEmail", function(value, element) {

    $.ajax({
        type: "POST",
        cache: "false",
        async: "false",
        url: "/json/checkEmail",
        dataType: "json",
        data: {
            email: function() {
                return $("email").val();
            }
        },
        success: checkEmailSuccess,
        error: checkEmailError
    });

    // Seems checkEmailStatus value never gets changed:
    return checkEmailStatus;

}, "Email Address Problem");


// The Binding
$(document).ready(function(){
    $('#MyForm').validate({
        onfocusout: false,
        onkeyup: false,
        rules: {
            "email": {
                required: true,
                minlength: 2,
                maxlength: 42,
                email: true,
                checkEmail: true
            }
        }
    });
});

</script>
</head>

<body>

    <!-- the Form -->
    <form id="MyForm">
        <input type="text" name="email"/>
        <input type="submit" name="submit"/>
    </form>

</body>
</html>

Answer 1

这里的正确答案是确实使用“远程”选项，但使用“dataFilter”执行所有响应处理：

checkEmailSuccess = function(response) {
    switch (jQuery.parseJSON(response).code) {
        case 200:
            return "true"; // <-- the quotes are important!
        case 401:
            alert("Sorry, our system has detected that an account with this email address already exists.");
            break;
        case undefined:
            alert("An undefined error occurred.");
            break;
        default:
            alert("An undefined error occurred");
            break;
    }
    return false;
};

"email": {
    required: true,
    minlength: 2,
    maxlength: 42,
    email: true,
    remote: {
        url: "/json/checkEmail",
        type: "POST",
        cache: false,
        dataType: "json",
        data: {
            email: function() { return $("#email").val(); }
        },
        dataFilter: function(response) {
            return checkEmailSuccess(response);
        }
    }
},

Answer 2

addMethod需要立即执行true / false响应，并且您正在执行AJAX调用，这是一个异步操作，因此变量checkEmailStatus将返回其初始值。请查看“远程”验证，这是您所需要的：

http://jqueryvalidation.org/remote-method/

更新：我刚注意到async = false。尽量避免这种选择。它会降低用户体验。

试试这个：

$('#MyForm').validate({
    onfocusout: false,
    onkeyup: false,
    rules: {
        "email": {
            required: true,
            minlength: 2,
            maxlength: 42,
            email: true,
            //checkEmail: true
            remote:{
                url: "/json/checkEmail", //make sure to return true or false with a 200 status code
                type: "post",
                data: {
                    email: function() {
                        return $("email").val();
                    }
                }
            }
        }
    }
});

Answer 3

如果你想使用实际的http响应代码，你可以使用$ .ajax调用的错误函数，它将在验证插件中运行。

remote: {
    url: "/json/checkEmail",
    type: "POST",
    cache: false,
    dataType: "json",
    data: {
        email: function() { return $("#email").val(); }
    },
    error: function(jqXHR, textStatus, errorThrown) {
        alert(jqXHR.status);
        alert(textStatus);
        alert(errorThrown);
    }

jQuery验证：使用AJAX的自定义验证器

JSON响应：

代码

3 个答案: