Question

I’m using a jQuery UI tab control to implement a simple wizard. For validation I’m using jQuery validation. When pressing the “next” button to move on to the next tab of the wizard, I validate everything on the current tab:

$('.forward').click(function () {
  var valid = true;
  $(this).closest("div").find("input").each(function () {
    valid = valid && $("#form").validate().element(this);
  });

  // Code to select next tab if valid
});

This works – I get the correct value in valid. However, if anything is wrong, the error message doesn’t show up immediately. I have to click somewhere else to make the next button lose focus before the error message appears.

How can I make the error messages appear immediately after running validate().element(this)?

Answer 1

Your method behaves as validation on blur or keyup, but returns the result.
You don’t have blur or keyup here.
try

$('.forward').click(function () {
  var valid = true;
  $(this).closest("div").find("input").each(function () {
    valid = valid && $("#form").validate().element(this);
    this.blur();
  });
// Code to select next tab if valid
});