我遇到一个非常奇怪的问题，Jquery验证只发生在Chrome中。此页面上的验证似乎同时触发.validate（）函数中的Highlight和Unhighlight函数，因此如果我不填写表单，它会循环遍历每个元素并在高亮函数中应用“invalid”类，但是某些原因，它通过并立即应用代码在unhighlight，我不知道为什么？
JS
$(document).ready(function () {
//Validation for form fields on Payment form
/*This adds a method to test whether value is equal to placeholder, and if it is, don't consider it filled out. This is necessary to circumvent IE placeholder plugin*/
jQuery.validator.addMethod("notEqual", function (value, element, param) {
return this.optional(element) || value != param;
}, "Required.");
$('#payment-form').validate({
onfocusout: function (element) {
$(element).valid();
},
rules: {
"data[Payment][card_holder]": { required: true, minlength: 2 },
"data[Payment][card_number]": { required: true, creditcard: true },
"data[User][first_name]": { required: true, notEqual: "First Name" },
"data[User][last_name]": { required: true, notEqual: "Last Name" },
"data[UserDetail][company]": { required: true },
"data[UserDetail][job_title]": { required: true },
"data[UserDetail][telephone]": { required: true },
"data[User][email]": {
required: true,
email: true,
remote: {
url: "/usermgmt/users/email_exists",
type: "post"
}
},
"data[User][password]": { required: true },
"data[Address][billing_line_1]": { required: true },
"data[Address][billing_line_2]": { required: true },
"data[Address][billing_state]": { required: true },
"data[Address][billing_postcode]": { required: true },
credit_exp_month: { required: true, notEqual: "MM", number: true, max: 12, minlength: 2, maxlength: 2 },
credit_exp_year: { required: true, notEqual: "YYYY", number: true, minlength: 2, maxlength: 4 },
"data[Payment][cvv]": { required: true, number: true, minlength: 3, maxlength: 4 },
},
errorClass: 'error',
unhighlight: function (element, errorClass, validClass) {
$(element).removeClass(errorClass).addClass(validClass);
validateIcon(element);
},
highlight: function (element, errorClass, validClass) {
$(element).addClass(errorClass).removeClass(validClass);
validateIcon(element);
}
});
function validateIcon(element) {
$(element).siblings('span.validate_icon').remove();
if ($(element).hasClass('error')) {
alert("error");
$(element).closest('li').find('label>span:first').html('<span class="validate_icon invalid"> <span class="icon-stack"><i class="icon-sign-blank icon-stack-base"></i><i class="icon-exclamation"></i></span></span>');
} else if ($(element).hasClass('valid')) {
alert("valid");
$(element).closest('li').find('label>span:first').html('<span class="validate_icon valid"> <span class="icon-stack"><i class="icon-sign-blank icon-stack-base"></i><i class="icon-ok"></i></span></span>');
}
}
});
处理电子邮件的PHP代码存在：
public function email_exists() {
$this->autoRender = false;
if($this->request->is('post')) {
$this->RequestHandler->respondAs('json');
if(!$this->User->findByEmail($this->request->data['User']['email'])) {
echo json_encode(true);
} else {
echo json_encode(false);
}
}
}
我也尝试过回声“真实”;和回声1;我已经尝试了以下评论中建议的所有内容，但无论如何 - 问题都存在。
答案 0 :(得分：7)
我遇到了完全相同的问题，通过查看你的代码，我可能会说你有相同的原因，但让我们把它分解。
<强>检查
首先，让我们检查一下我的评论是否相关，我实际上可以帮到你。在您的电子邮件验证设置中评论远程参数：
"data[User][email]": {
required: true,
email: true
},
你的问题解决了吗？太棒了，继续阅读（随意跳到修复部分）。
问题
<强> 1 即可。当插件验证时，它会创建一个错误列表，存储在名为“errorList”的数组中。
<强> 2 即可。你有没有使用showErrors功能？它可以显示所有错误，也可以显示目标显示错误。如果您想显示特定错误，或者显示超出插件限制的错误（ej。：60秒超时已过期），您可以使用该方法。
第3 即可。显示特定错误时，该方法的作用是将指定的错误添加到 errorList 。
4。问题是在添加新错误之前清除了列表（我没有编写代码，但似乎已经完成了以便使该列表保持良好和干净，并且没有相同输入的两个不同错误。）
<强> 5 即可。现在，当远程检查电子邮件时，我们处于超时状态。因此它使用showErrors功能，这意味着在单击时验证表单，几秒钟后（使用PHP响应），将显示电子邮件错误，但清除errorList。这就是发生的事情。
修复
如果您不打算明确使用 showErrors ，事实是您可以注释清除errorList的行：
showErrors: function( errors ) {
if ( errors ) {
// add items to error list and map
$.extend( this.errorMap, errors );
//this.errorList = [];
for ( var name in errors ) {
...
如果您要明确使用该方法，可以尝试使用此版本。不清除错误列表，但检查您没有两次添加相同的错误：
showErrors: function( errors ) {
if ( errors ) {
// add items to error list and map
$.extend( this.errorMap, errors );
for ( var name in errors ) {
var tempElem = this.findByName(name)[0];
this.errorList = jQuery.grep(this.errorList, function( error, i ) {
return error.element != tempElem;
});
this.errorList.push({
message: errors[name],
element: tempElem
});
}
让我知道是否有效或你有任何问题。
答案 1 :(得分：2)
你的这段代码可能有问题......
onfocusout: function (element) {
$(element).valid();
},
您不能将.valid()方法放在.validate()方法中，而不会导致一些严重问题。
这是插件中的默认onfocusout函数...
onfocusout: function( element, event ) {
if ( !this.checkable(element) && (element.name in this.submitted || !this.optional(element)) ) {
this.element(element);
}
}
自定义onfocusout功能的用途是什么？通常，由于onfocusout触发器已内置到功能中，因此不需要它。一个构建自己的onfocusout函数仅以覆盖内置默认值。 因此，如果您想要默认的onfocusout行为，只需完全删除onfocusout选项。
如果您真的想模仿代码中的内容，则需要看起来像这样......
onfocusout: function(element, event) {
this.element(element);
}
引用OP评论：
“正如我所说，我不确定它对你有什么好处:(我不能在这里格式化......）”
$this->RequestHandler->respondAs('json');
if(!$this->User->findByEmail($this->request->data['User']['email'])) {
return json_encode(true);
} else {
return json_encode(false);
}
显示任何可能影响问题的代码，尤其是任何错误的代码都会带来很多好处。 This could have been solved two days ago
return用于返回调用此函数的PHP函数。换句话说，return在这里什么都不做，因为没有PHP函数可以返回。另一方面，echo将从PHP输出输出 ...这就是jQuery验证所需的内容remote ......
if (....) {
echo true;
} else {
echo false;
}