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

Question

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

Spa*_*nky 6 validation ajax jquery

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

当前状态:除"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"}

Run Code Online (Sandbox Code Playgroud)

要么

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

Run Code Online (Sandbox Code Playgroud)

代码

<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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Spa*_*nky 13

这里的正确答案是确实使用"远程"选项,但使用"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);
        }
    }
},

Run Code Online (Sandbox Code Playgroud)

归档时间：	12 年，6 月前
查看次数：	19714 次
最近记录：	11 年，10 月前