jQuery Validation errorPlacement

Question

This works:

$("[id$='_zzz']").rules(
    "add",
    {
        required: true,
        minlength: 8,
        messages: {
            required: "...",
            minlength: jQuery.format("...")
        }            
    }
);

The error message comes up.

When I try to style the message, this doesn't work:

$("[id$='_zzz']").rules(
    "add",
    {
        required: true,
        minlength: 8,
        messages: {
            required: "...",
            minlength: jQuery.format("...")
        },
        errorElement: "span",
        errorPlacement: function(error, element) {
            error.insertAfter(element);
            error.css("margin", "0 0 0 5px");
        }             
    }
);

When I style via the validate function, the styling is applied so it works:

$('#aspnetForm').validate({
    errorElement: "span",
    errorPlacement: function(error, element) {
        error.insertAfter(element);
        error.css("margin", "0 0 0 5px");
    }
});

Why can't I style using errorplacement in the rules add function?

Answer 1

In the first method, you're passing a errorPlacement property/function on the object to the rules method...it simply doesn't care of check for this and doesn't use it. For any object you pass in to javascript it has to check for that property or make use of it in some manner, otherwise it's just extraneous information. You could add myExtrathing:'ValueHere' to the object as well, wouldn't break anything...but wouldn't be used either.

The .validate() method has an existing errorPlacement function (that is actively uses, that's the important part, it's looking for it) in the default options and performs an extend to replace the default method with the one your provided...if you provided one. This same behavior is true for almost every jQuery plugin and any option you specify, it merges the default options with the ones you provide/override. You can see some simple examples of this behavior in the jQuery plugin authoring manual.