JQuery Validation Plugin - Focus Event Inconsistent On Key/mouse Events

I'm using the query validation plugin (http://docs.jquery.com/Plugins/Validation) and my goal is to show error messages before the form is submitted. To do this I'm using the .vali

Solution 1:

This should work: http://jsfiddle.net/yQRvZ/

var code;
$('input').keyup(function(e) {
    code = (e.keyCode ? e.keyCode : e.which);
    if(code == 9) {
        return false;
    }
});

Everytime you release a key (this is .keyup()) and an input field is focused this jQuery code checks for the keycode of the released key. For Tab the keycode is 9, so everytime you release Tab, return false; prevents the default event and prevents the event from bubbling up.

Solution 2:

This works better:

$(document).ready(function() {
    $('#myForm').validate();

    //$('#myForm').valid();
    $('#myForm').hideErrors();

    $('input').blur(function() {
        if( !$(this).valid() ) $(this).next('label.error').show();                
    });
});​

Solution 3:

I needed to use a combination of the code from @mindandmedia and @Fabian.

Here's what worked for me:

var code; 

$('input').keyup(function(e) {
    code = (e.keyCode ? e.keyCode : e.which);
    if(code == 9) {
        return false;
    }
});

$('#myForm').validate();

$('input').blur(function() {
    if( !$(this).valid() ) { 
         $(this).next('label.error').show();                
    }
});