javascript - JQuery Validate 在 Chrome 中同时触发突出显示和取消突出显示

Question

我在使用 Jquery 验证时遇到了一个非常奇怪的问题，该问题仅发生在 Chrome 中。此页面上的验证似乎同时触发了 .validate() 函数中的突出显示和取消突出显示函数，因此如果我不填写表单，它会循环遍历每个元素并在突出显示函数中应用“无效”类，但随后对于由于某种原因它会经历并立即应用取消突出显示的代码，我不知道为什么？

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);
        }
    }
}

我也尝试过简单地回显“true”；和回显1；我已经尝试了下面评论中建议的所有内容，但无论如何 - 问题仍然存在。

Answer 1

我遇到了完全相同的问题，通过查看您的代码，我可能会说您有相同的原因，但让我们将其分解。

检查

首先，让我们检查一下我的评论是否相关，并且我确实可以为您提供帮助。在您的电子邮件验证设置中注释远程参数:

"data[User][email]": {
            required: true,
            email: true
        },

你的问题解决了吗？太好了，请继续阅读(请随意跳至修复部分)。

问题

1。当插件验证时，它会创建一个错误列表，存储到名为“errorList”的数组中。

2。您用过showErrors吗？功能？它可以显示所有错误，也可以定位显示错误。如果您想显示特定错误，或者显示超出插件限制的错误(例如:60 秒超时已过期)，您可以使用该方法。

3。当显示特定错误时，该方法的作用是将指定的错误添加到 errorList 中。

4.问题是在添加新错误之前该列表已被清除(我没有编写代码，但似乎这样做是为了保持该列表干净整洁，并且同一输入不会出现两个不同的错误)。

5。现在，当远程检查电子邮件时，我们处于同样的超时情况。因此它使用 showErrors 功能，这意味着单击时会验证表单，几秒钟后(使用 PHP 响应)，会显示电子邮件错误，但会清除错误列表。这就是正在发生的事情。

修复

1. 如果您不打算显式使用 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 ) {
           ...
   

2. 如果您打算显式使用该方法，则可以尝试此版本。不清除错误列表，但检查您是否没有两次添加相同的错误:

   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
               });
           }
   

如果有效或者您有任何问题，请告诉我。