Validation plugin and issue with numberOfInvalids and remote validation.

Validation plugin and issue with numberOfInvalids and remote validation.

I'm trying to hide an 'errorContainer' when there are no more errors. However, when using remote validation, it appears that the number of invalids is not set correctly when I tab out of an 'email' text field.

When I have focus on email (first input in my form), I can enter a valid email and tab out. The 'unhighlighted' function is called and console displays:

Invalids: 1

but then onfocusout is called and console displays:

emailAddress undefined

At this point, I'll be in the next input field (emailAddressConfirm). When I enter the same email and shift-tab back to emailAddress, I get the following:

Invalids: 1
emailAddressConfirm: true

At this point, if I again tab out of emailAddress, I get the following:

Invalids: 0
emailAddressConfirm: true

Now, the naturally you are thinking, "Is your checkEmailAvailability function working. Yes. I checked that a number of times and I have proven it to work. Anyway, it doesn't explain why the initial tab-out would produce an 'undefined' when it searches for emailAddress.

The only thing I can think of is that the validator is lazily initialized or something? Anyway, I could use all the help you can spare.

Thanks!

  1.   var validator = $('#memberDetailsForm').validate({
  2.     errorElement: 'span',
  3.     wrapper: 'li',
  4.     errorLabelContainer: '#error-block ul',
  5.     errorContainer: '#error-block',
  6.     unhighlight: function(element, errorClass) {
  7.       $(element).removeClass('error');
  8.       var numberOfInvalids = this.numberOfInvalids();
  9.       if (numberOfInvalids === 0) {
  10.         console.log("Invalids: " + numberOfInvalids);
  11.         $('#error-block').hide();
  12.       } else {
  13.         console.log("Invalids: " + numberOfInvalids);
  14.       }
  15.     },
  16.     rules: {
  17.              emailAddress: {required: true,
  18.                             email: true,
  19.                             remote: {url:'/member/checkEmailAvailability'}
  20.                             },
  21.              emailAddressConfirm: {equalTo: "#emailAddress" },
  22.              countryCode: 'required',
  23.              currencyCode: 'required'
  24.            },
  25.     messages: {
  26.                 emailAddress: {
  27.                                 required: 'emailAddressRequired',
  28.                                 remote: 'emailAddressAlreadyTaken',
  29.                                 email: 'emailAddressFormat'
  30.                               },
  31.                 emailAddressConfirm: {
  32.                                        required: 'confirmAddressRequired',
  33.                                        equalTo: 'confirmAddressMatch'
  34.                                       },
  35.                 countryCode: {
  36.                                 required: 'countryCodeRequired'
  37.                               },
  38.                 currencyCode: {
  39.                                 required: 'currencyCodeRequired'
  40.                               }
  41.               },
  42.     submitHandler: function(form) {
  43.                      if (successCallback) {
  44.                        successCallback(form, true);
  45.                      }
  46.                    },
  47.     onfocusout: function(element) {
  48.                   var $elementId = $(element).attr('id');
  49.                   console.log($elementId,  validator.element('#' + $elementId));
  50.                 }
  51.   });
  52.   $('#countryCode').change(function(event) {
  53.     $.ajax({
  54.       type: "GET",
  55.       url: "checkCountryService",
  56.       data: {countryCode: $('#countryCode option:selected').val()},
  57.       success: function(data) {
  58.         switch (data.countryService) {
  59.           case 'limited':
  60.             NT_COMMON.dialogSupport.show(data.dialog);
  61.             break;
  62.           case 'none':
  63.             NT_COMMON.dialogSupport.show(data.dialog);
  64.             $('#countryCode').val('');
  65.             break;
  66.         }
  67.       }
  68.     });
  69.   });