This makes it very difficult to determine which element is causing the error and execute code in response.
For instance, the following does not work, because there is no way to determin which input caused the error because the errorClass has not been set yet when invalidHandler is called: $('#step_1_form').validate({ rules: { category_selector: "required", zip_code: "required" }, messages: { category_selector: "" }, invalidHandler: function() { if ($('select[name^="category_selector"][class*="error"]').length > 0) { // EXECUTE SOME CODE SPECIFIC TO THIS ERROR } } } A work around is to use setTimeout, but is obviously an undesirable hack: $('#step_1_form').validate({ rules: { category_selector: "required", zip_code: "required" }, messages: { category_selector: "" }, invalidHandler: function() { var displayErrors = function() { if ($('select[name^="category_selector"][class*="error"]').length > 0) { // EXECUTE SOME CODE SPECIFIC TO THIS ERROR } }; setTimeout(displayErrors,10); } } Am I correct? or is there a better way to determine the element causing the error, and regardless, shouldn't errorClass be set before invalidHandler is called anyways?