How to focus invalid fields with jQuery validate?

There is focusInvalid option, which is true by default. But it works only when form submission happens. If I validate the form with valid method, then it doesn't work. So the question is how to focus invalid field when valid is used?

Please see this demo to see the difference. Just press buttons there.

With the invalidHandler you can set focus to the first element that fails:

$("#form").validate({
    onfocusout: false,
    invalidHandler: function(form, validator) {
        var errors = validator.numberOfInvalids();
        if (errors) {                    
            validator.errorList[0].element.focus();
        }
    } 
});

First of all you need to save your validator to a variable so you can use it in the click handler:

var validator = $("#test-form").validate({ /* settings */ });

Then in the validate handler, you can manually call the focusInvalid function from the validator variable:

  $("#validate").click(function() {
        if ($("#test-form").valid()) 
              alert("Valid!");
        else
              validator.focusInvalid();
    
        return false;
  });

Example