jQuery validate not working as expected

Question

I\'m using jQuery validate() and when I simply have:

$(\"#myForm\").validate({
    onfocusout: function (valueToBeTested) {
        if($(valueToBeTested).hasClas         


        

Answer 1

Completely remove your custom onfocusout and onkeyup functions. You are totally misusing these.

The onfocusout and onkeyup functions only control how validation is triggered and you have broken this functionality.

Adding/removing the error/valid classes is already being done automatically by default on keyup and focusout. If you need to over-ride how classes are applied, you would write custom highlight and unhighlight functions. However, based on your code, I see no reason to do this either. You would only need to change the error class from the default error into invalid.

errorClass: "invalid",
validClass: "valid" // <- default value

---

As far as the submitHandler, as per docs it only fires when the form is valid, so it's useless to put a conditional inside that tests for validity.

You also would never put code in the submitHandler that has anything to do with the error messages or their HTML structure. You would use errorPlacement and/or errorElement for this. The success option is used for leveraging the message label elements when the field is valid, since they're normally hidden in this case. You would use showErrors, errorContainer, and errorLabelContainer to construct a centralized error message box.

I suggest you refer to the documentation to learn how the various options and functions are properly used.

In other words, you seem to be trying to force the plugin to do what it's already supposed to be doing. By improperly over riding these designated options, you're breaking the plugin, and it's still somewhat unclear what you're ultimately trying to achieve. If you're only trying to over-ride the default assigned classes, you don't need to re-write all the default functionality, just use the errorClass and validClass options.

$('#myForm').validate({
    errorClass: "invalid",
    validClass: "valid", // <- already the default value, not needed to specify
    rules: {
        ...
    }
});

Simple demo: http://jsfiddle.net/9ax47efu/

---

EDIT:

After many comments, it was determined that the OP wants to switch the validation behavior from "Lazy" to "Eager".

Defaults modified to remove "Lazy" validation...

onkeyup: function(element, event) {
    var excludedKeys = [
        16, 17, 18, 20, 35, 36, 37,
        38, 39, 40, 45, 144, 225
    ];
    if (event.which === 9 && this.elementValue(element) === "" || $.inArray(event.keyCode, excludedKeys) !== -1) {
        return;
    } else {
        this.element(element);
    }
},
onfocusout: function(element) {
    if (!this.checkable(element)) {
        this.element(element);
    }
}

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