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

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

当前状态：除“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: https://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,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>

解决方法

这里的正确答案是确实使用“远程”选项,但使用“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,remote: {
        url: "/json/checkEmail",type: "POST",cache: false,data: {
            email: function() { return $("#email").val(); }
        },dataFilter: function(response) {
            return checkEmailSuccess(response);
        }
    }
},

原文链接：https://www.f2er.com/jquery/176748.html

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

解决方法

猜你在找的jQuery相关文章