jquery validation initiation

Question

This is really basic I know, but I'm trying to get a form element to validate onblur or while typing. I'm having a really difficult time getting the thing to function right.

$('document').ready(function(){
    $('form').validate({
       rules: {
                a: {
                    onkeyup:true,
                    required:true,
                    minlength:2
                   }
        },      
        messages: {
                a: {
                    required: "enter your name!"
                   }       
        }  

    }); 
 });

I can get the thing to partially work...but I have to click in and out of the input after entering something. Why is this? I then added this

    $('#a').blur(function(){
        $("form").validate().element("#a");
    });

it works onblur but when I go back and enter a valid entry, the error message doesn't go away. Here is the html:

<div>
<form action="#">
    <input type="text" name="a" id="a">
</form>
</div>

Here are the fiddles:

http://jsfiddle.net/mmw562/S7AKK/16/

http://jsfiddle.net/mmw562/S7AKK/17/

Can someone explain what is going on? I sure appreciate your help even though I know this is pretty basic stuff....

Answer 1

As per documentation, onkeyup: is a .validate() option and not a field validation rule. You must place it accordingly...

$('document').ready(function(){
    $('form').validate({

    // "onkeyup" is the default behavior, leave it out unless disabling
    // onkeyup: false,  

       rules: {
            a: {
                required:true,
                minlength:2
            }
        },      
        messages: {
            a: {
                required: "enter your name!"
            }       
        }  

    }); 
});

---

EDIT:

onkeyup: is the default behavior, so simply leave it out for the default behavior. Setting it to true is not only redundant, it actually breaks its intended functionality.

If you need to disable it, set it to false:

onkeyup: false

If you need to change the default behavior of onkeyup, use the function:

onkeyup: function(element, event) {
   // your custom onkeyup functionality
}

And purely for reference, this is how the default onkeyup: function operates:

onkeyup: function(element, event) {
    if ( event.which === 9 && this.elementValue(element) === '' ) {
        return;
    } else if ( element.name in this.submitted || element === this.lastActive ) {
        this.element(element);
    }
}