JQuery Validation: errorPlacement doesn't get called

Question

I use the jquery validation plugin. However, the errorPlacement function won't be executed. No console logging happens if validation errors occur. What to do? I use jquery 1.10.3, I tried 1.9.0 as well.

$("#rateform").validate({
    debug: true,
    rules: {
      stars: {
      required: true,
      min: 1
    },
    errorPlacement: function(error, element) {
      console.log(element);
    }
}

});

Answer 1

Clean up your code

$("#rateform").validate({
    debug: true,
    rules: {
        stars: {
            required: true,
            min: 1
        },
        errorPlacement: function (error, element) {
            console.log(element);
        }
    }

});

Is errorPlacement supposed to be in rules. Looking at the documentation, that is not how it seems to work.

$("#rateform").validate({
    debug: true,
    rules: {
        stars: {
            required: true,
            min: 1
        }
    },
    errorPlacement: function (error, element) {
        console.log(element);
    }    
});

Answer 2

I know this might seem obvious, but make sure you are not calling

var options = {}; //some different initial settings
$("#rateform").validate(options) ;

again on the page or in another script file AFTER you initialized it. This will WIPE OUT your previous options.

It's embarrassing I know, but I was debugging directly on the page (this allowed me to bypass build process) and had forgot that it was there. I spent most of the day trying to figure out why my options were not being applied (which was in another script file that was included BEFORE the above call).

Hopefully, this will save others time coming to this realization in the future (including myself).