由于 jQuery validate 中提供的默认远程方法是异步的,因此可以绕过此验证。
来自the answer in this question 修改后的方法可以使远程方法同步。 (Glazed)
//Created for jQuery Validation 1.11.1
$.validator.addMethod("synchronousRemote", function (value, element, param) {
if (this.optional(element)) {
return "dependency-mismatch";
}
var previous = this.previousValue(element);
if (!this.settings.messages[element.name]) {
this.settings.messages[element.name] = {};
}
previous.originalMessage = this.settings.messages[element.name].remote;
this.settings.messages[element.name].remote = previous.message;
param = typeof param === "string" && { url: param } || param;
if (previous.old === value) {
return previous.valid;
}
previous.old = value;
var validator = this;
this.startRequest(element);
var data = {};
data[element.name] = value;
var valid = "pending";
$.ajax($.extend(true, {
url: param,
async: false,
mode: "abort",
port: "validate" + element.name,
dataType: "json",
data: data,
success: function (response) {
validator.settings.messages[element.name].remote = previous.originalMessage;
valid = response === true || response === "true";
if (valid) {
var submitted = validator.formSubmitted;
validator.prepareElement(element);
validator.formSubmitted = submitted;
validator.successList.push(element);
delete validator.invalid[element.name];
validator.showErrors();
} else {
var errors = {};
var message = response || validator.defaultMessage(element, "remote");
errors[element.name] = previous.message = $.isFunction(message) ? message(value) : message;
validator.invalid[element.name] = true;
validator.showErrors(errors);
}
previous.valid = valid;
validator.stopRequest(element, valid);
}
}, param));
return valid;
}, "Please fix this field.");
但问题是:
默认的远程方法可以显示来自服务器的自定义错误消息,
但 synchronousRemote 方法只能显示来自客户端javascript的默认错误消息或自定义错误消息。
我需要根据值显示不同的错误消息 任何人都知道如何修复 synchronousRemote 方法以显示来自服务器的错误消息?
我尝试了一些解决方法。似乎以下代码片段失败因为jQuery.validate只触发一个远程方法。
$(selector).rules('add',{
synchronousRemote1: '/validation/rule1'
, synchronousRemote2: '/validation/rule2'
, messages: {
synchronousRemote1: 'error msg 1'
, synchronousRemote2: 'error msg 2'
}
});
当前的工作解决方法使用克隆。
<input type="text" name="clone1" id="clone1" >
<input type="text" name="clone2" id="clone2" style="visibility: hidden; width: 0;" >
和
$('#clone1').rules('add',{
required: true
, synchronousRemote: '/validation/rule1'
, messages: {
required: ''
, synchronousRemote: 'errmsg1'
}
});
$('#clone1').on('keyup',function(){
$('#clone2').val( $('#clone1').val() ); //copy the value
}).on('blur',function(){
validator.element('#clone2'); //force validation
});
$('#clone2').rules('add',{
required: true
, synchronousRemote: '/validation/rule2'
, messages: {
required: ''
, synchronousRemote: 'errmsg2'
}
});
这种解决方法似乎有效,但很难看 所以任何人都知道如何正确修复 synchronousRemote 方法以显示来自服务器的错误消息?