jQuery验证：使用AJAX的自定义验证器
[英]jQuery Validation: Custom validator with AJAX
问题描述
OK, I give up. 
好的，我放弃了。 After trying endless permutations of inline functions, callbacks, return parameters, I still cannot get this to behave how I want. 在尝试了内联函数，回调，返回参数的无穷无尽的排列之后，我仍然无法按照我的意愿行事。 Any help would be appreciated. 任何帮助，将不胜感激。
Current status: everything works except the 'checkEmail' error message. 当前状态：除“checkEmail”错误消息外，一切正常。 The javascript popups convey the proper messages to the user, but the field will not show any error message, whether true or false is returned by the handlers. javascript弹出窗口向用户传达正确的消息，但该字段不会显示任何错误消息，处理程序返回true或false。
The desired outcome is that if the JSON payload from the AJAX call is anything other than a 200, to pop a Javascript alert and highlight the field as invalid with the appropriate error message. 期望的结果是，如果来自AJAX调用的JSON有效负载不是200，则弹出Javascript警报并使用相应的错误消息将该字段突出显示为无效。 Currently, it pops the alerts, but doesn't mark the field as invalid. 目前，它会弹出警报，但不会将该字段标记为无效。
(Sorry, this is jQuery 1.7 + jquery.validation plugin) （对不起，这是jQuery 1.7 + jquery.validation插件）
JSON responses: JSON响应：
Our JSON response payloads look like this: 我们的JSON响应有效负载如下所示：
{"message": "Email is not in use.", "code": 200, "email": "test-39485787@mailinator.com"}
or 要么
{"message": "Duplicate email address detected", "code": 401}
The code 编码
<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>
3 个解决方案
解决方案1
13 已采纳 2013-06-07 23:50:33
The correct answer here is to indeed use the "remote" option, but do all of your response processing using "dataFilter": 这里的正确答案是确实使用“远程”选项，但使用“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);
}
}
},
解决方案2
2 2013-06-07 21:28:46
The addMethod expects a true/false response inmediately and you are doing an AJAX call which is an async operation so the variable checkEmailStatus will return its initial value. addMethod需要立即执行true / false响应，并且您正在执行AJAX调用，这是一个异步操作，因此变量checkEmailStatus将返回其初始值。 Please look into "remote" validation, this is what you need: 请查看“远程”验证，这是您需要的：
http://jqueryvalidation.org/remote-method/ http://jqueryvalidation.org/remote-method/
Update: I just noticed the async = false. 更新：我刚注意到async = false。 Try to avoid that option. 尽量避免这种选择。 It reduces the user experience. 它减少了用户体验。
Try this: 尝试这个：
$('#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();
}
}
}
}
}
});
解决方案3
0 2014-01-22 23:01:54
If you want to use actual http response codes, you can use the error function of the $.ajax call, it will work inside the validation plugin. 如果你想使用实际的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);
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.