Validation isn't being done when I need it to be

Validation isn't being done when I need it to be

I have a page that has been using the jQuery validation plugin successfully to validate several text fields.  There are several submit buttons on the page, and I have configured the validator as follows:

  1. _validator = $("#ftsEditTripForm").validate({
  2.     onkeyup: false,
  3.     submitHandler: function() {}
  4. });

I register the following click event handler for all the submit buttons on the page:

  1. function clickHandler(jqEvent) {
  2.     var action = jqEvent.target.id;
  3.     if (action !== "cancel") {
  4.         _form$.validate();
  5.         if (_validator.numberOfInvalids() === 0) {
  6.             submitForm(action);
  7.         }
  8.     } else {
  9.         confirmCancel(action);
  10.     }
  11. }
  12. function submitForm(action) {
  13.     $(".flowEvent").attr("name", "_eventId_" + action);
  14.     if (action === "submit" ) {
  15.         $("input[name=status]").val("S");
  16.     } else {
  17.         $("input[name=status]").val("D");
  18.     }
  19.     _form$[0].submit();
  20. }

This has been working fine.  Validation isn't done until the user clicks one of the submit buttons and, if that button is the Cancel button, the user is asked to confirm they want to lose any changes they've made on the page before the page is actually submitted.  So we're stopping page submission if the user clicks the Cancel button and then clicks the No button, saying they don't want to continue with the cancel operation.

Now I've added tabs to a navigation bar, and I need to do the same kind of thing if the user clicks on a tab other than the tab for the page she's on now.  I've defined the following click event handler for the tabs:

  1. function tabClickHandler(jqEvent) {
  2.     var target = jqEvent.target;
  3.     while ( ! $(target).hasClass("navTab")) {
  4.         target = target.parentNode;
  5.     }
  6.     var tabNumber = target.dataset.tabnumber;
  7.     _form$.validate();
  8.     if (_validator.numberOfInvalids() === 0) {
  9.         $("input[name=tabNumber]").val(tabNumber);
  10.         submitForm("navbar");
  11.     }
    }

My problem is that _validator.numberOfInvalids() always returns 0 when I click on a tab.  I've put a breakpoint in my validation code, and it isn't called when I click on a tab.  As a result, the page is always submitted, even if there are validation errors.

I've tried a number of things -- various values for the validation plugin's onsubmit and submitHandler options, changing the tab <div>s to <button>s -- without success.

I hope someone can point me in the right direction.  I have to get this working one way or another, and I'd like to keep using the validation plugin.

Thanks for reading this far.

Thom