jQuery.validate.js onkeyup = true error

Question

With my jquery validation configuration, I get the following error when setting onkeyup to true. It works if I set it to false, but I don't get validation feedback until I blur the field, and I'm looking to get validation on each keyup:

$("#signupForm").validate({
        onkeyup: true,        
        onclick: false
        // rules omitted for brevity
    }

I get the following error:

TypeError: validator.settings[eventType].call is not a function
validator.settings[eventType].call(validator, this[0], event);
jquery.validate.js line 391

Answer 1

You actually need to set the onkeyup option to a function that accepts the element being validated as a parameter, so try changing:

onkeyup: true, 

to

onkeyup: function(element) {$(element).valid()}

Answer 2

onkeyup is enabled by default so you do not need to set it to true. If you do, you break the functionality already built into the plugin.

You have three options:

---

1) Leave the onkeyup option out of .validate(). This keeps onkeyup functionality enabled by default. (edit: "by default" means that validation occurs on every "key-up" event only after the field is initially validated by another event.)

DEMO: http://jsfiddle.net/ZvvTa/

---

2) onkeyup can be set to false to disable this option.

DEMO: http://jsfiddle.net/ZvvTa/1/

---

3) Replace onkeyup with your own callback function to modify how it operates. (Demo uses default function)

DEMO: http://jsfiddle.net/ZvvTa/2/

Below is the default, unmodified, onkeyup callback function:

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

---

See: http://docs.jquery.com/Plugins/Validation/validate#toptions

---

EDIT:

By default, the plugin does not do any "key-up" validation until after the field is initially validated by another event. ("Lazy" validation)

So here is a more properly modified version of the onkeyup callback function that will provide immediate onkeyup validation. ("Eager" validation)

DEMO: http://jsfiddle.net/QfKk7/

onkeyup: function (element, event) {
    if (event.which === 9 && this.elementValue(element) === "") {
        return;
    } else {
        this.element(element);
    }
}

Answer 3

@Sparky is right, The correct answer is to remove the onkeyup option, my fiddle was working because I removed the onkeyup option not because I changed it to keyup.

By default the validation will happen on keyup event, if you want to turn off this feature then you have to add the setting onkeyup: false.

See the updated demo.

Demo: Fiddle

Answer 4

boolean values are not valid values for onkeyup event. Instead add a function, on what is needed to be done. Try something like:

    onkeyup: function(element) {
           $(element).valid(); 
    }
    onblur: function(element) { 
         $(element).valid(); 
    }

Answer 5

How about extending onkeyup:

    $('#signup-form').validate({

        onkeyup: function(element) {
            var element_id = $(element).attr('id');
            if (this.settings.rules[element_id].onkeyup !== false) {
                $(element).valid();
            }
        },

So now within rules you can do this:

        rules: {
            username: {
                required: true,
                minlength: 3,
                maxlength: 25,
                onkeyup: false, /* on blur validation */
            },
            password: {
                required: true,                   
                passwordmeter: true,
                onkeyup: true, /* on keyup validation */
            },

By extending onkeyup we made it a default behaviour, so sticking onkeyup: true is optional.