javascript - JQuery Validate is firing both Highlight and Unhighlight in Chrome -

i having strange problem jquery validate occurs in chrome. validation on page seems firing both highlight , unhighlight functions in .validate() function if dont fill out form cycles through each element , applies "invalid" class in highlight function reason goes through , applies code in unhighlight , cant work out why?

js

$(document).ready(function () {     //validation form fields on payment form      /*this adds method test whether value equal placeholder, , if is, don't consider filled out.  necessary 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 code handles email exists:

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

i have tried echo "true"; , echo 1; have tried suggested in comments below regardless - problem exists.

i had exact same problem, , seeing code might have same cause, let's break down.

checking

first, let's check comment relevant, , can you. comment remote param on email validation set up:

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

is problem fixed? great, keep reading (feel free skip fix section).

the problem

1. when plugin validates, creates list of errors, stored array called "errorlist".

2. have ever used showerrors functionality? it's there show errors, target-show errors. if want show specific errors, or show errors out of limits of plugin (ej.: 60s timeout has expired), can use method.

3. when showing specific errors, method add specified error(s) errorlist.

4. problem before adding new errors list cleared up (i didn't write code, seems it's done in order keep list nice , clean, , not having 2 different errors of same input).

5. now, when email checked remotely in same situation of timeout. uses showerrors functionality, , means form validated when click, , seconds later (with php response), email error shown, clearing errorlist. that's happening.

the fix

1. if not going explicit use of showerrors, truth can comment line errorlist cleared up:

   showerrors: function( errors ) {     if ( errors ) {         // add items error list , map         $.extend( this.errormap, errors );         //this.errorlist = [];         ( var name in errors ) {         ... 

2. if going explicit use of method, can try version instead. doesn't clear error list, checks you're not adding same error twice:

   showerrors: function( errors ) {     if ( errors ) {         // add items error list , map         $.extend( this.errormap, errors );         ( var name in errors ) {             var tempelem = this.findbyname(name)[0];             this.errorlist = jquery.grep(this.errorlist, function( error, ) {                 return error.element != tempelem;             });             this.errorlist.push({                 message: errors[name],                 element: tempelem             });         } 

let me know if worked or have problem.