jQuery Validation, displaying valid/invalid form tab(s) on submit

Question

I have a form with Tabs, and a simple function to validate the form tabs as the user moves between them. (using jQuery, Bootstrap, and jquery.validate)

Tab Validating Function

var validateTab = function(element) {

    var _element = $(element);
    var validatePane = _element.attr('data-target');
    var isValid = $(validatePane + ' :input').valid();
    var _li = _element.parent();

    // console.log(validatePane + " - " + isValid);

    if (isValid) {
        _li.removeClass('alert-danger');
        _li.addClass('alert-success');
    } else {
        _li.removeClass('alert-success');
        _li.addClass('alert-danger');
    }
}; // end function validateTab

I'm currently listening to the bootstrap 'hidden.bs.tab' event and calling the function.

// Validate Tab on tab switch.
$(document).on('hidden.bs.tab', 'a[data-toggle="tab"]', function(e) {
    validateTab(e.currentTarget);
});

The above works as expected, but I'd like to do this when the form is submitted also. I added a simple loop to get each tab and call to validateTab() in invalidHandler() of jQuery validate

invalidHandler: function(event, validator) {
  console.log('invalid form');
  $('#myForm').append(
    '<div class="alert alert-danger alert-dismissable">' +
    '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">' +
    '&times;' +
    '</button>' +
    '<strong>Error: </strong>' +
    '<span>Please correct the problems and try again.</span>' +
    '</div>'
  );

  // ADDED THIS CODE AND STARTED RUNNING INTO PROBLEMS.
  var $tabs = $('#myTab li a');
  $tabs.each(function(key, ele) {
    // IF last Tab of form is Valid form submits regardless of other errors.
    validateTab(ele);
  });

}

this works with one exception... When the last tab is valid the form suddenly submits even if there are errors on the other tabs. it appears calling valid overrides any previous calls or anything set prior to invalidHandler being called. Suddenly the entire form submits as if it had been validated successfully.

a full example can be found here. https://jsfiddle.net/qcean237/1/

Currently there is no validation on TAB 4 so submitting the form works every time even if none of the other required fields are provided.

Should I be validating the tabs a different way or in a different place to update the tab appearances on failed submits?

Thanks, Nathan

Answer 1

The invalidHandler only fires when the form is invalid, and the submitHandler only fires when the form is valid. That being said, your validateTab() function also triggers validation by calling .valid() . In other words, you're breaking the plugin by causing the invalidHandler to check validity when invalidHandler already knows the form is invalid... this is the root of your failure. The invalidHandler and submitHandler are only called after validity is determined... not concurrently, otherwise it can't know which handler should be fired.

Anyway, simply run validateTab() when you click the button...

$('button').on('click', function() {
    var $tabs = $('#myTab li a');
    $tabs.each(function(key, ele) {
        validateTab(ele);
    });
});

DEMO: https://jsfiddle.net/qcean237/2/

Answer 2

You don't need the code that validates each tab inside the invalidHandler. Since the tabs are already inside the form when you submit the form everything gets validated.

Simply remove the following lines from the invalidHandler

 $tabs.each(function(key, ele) {
   validateTab(ele);
 });

Here is a fiddle after removing the above and everything works fine.