How to add messages to a class with addClassRules

Question

I'm using jQuery Validate to validate a page with a large number of repeated rows of data. Due to limited space, each row has it's own validation summary.

I use addClassRules to apply the validation rules to the page but the default error messages are too generic in the summary (e.g. "Field is required, Field is required etc).

Example:

jQuery.validator.addClassRules({
amount: {
    required: true,
    range: [0, 2000000]
},
comment: {
    maxlength: 51
},
owner: {
    notFirstOption: true
},
A: {
    required: function (element) {  
        return getParentElement($(element), "tr").find(".colB input.B").val().length > 0;
    },
    digits: true
}});

Can you apply custom messages for the rules in each validation class? Ideally I'm after something like:

jQuery.validator.addClassMessages({
    amount: {
        required: "Amount is required",
        range: "Amount must be between 0 and 2,000,000"
    },
    comment: {
        maxlength: "Comment may be a maximum of 51 characters"
    },
    owner: {
        notFirstOption: "Please select an owner"
    },
    A: {
        required: "A is required if B is entered",
        digits: "A must be numeric"
    }});

Thanks in advance for any help you can offer!

Answer 1

I've come up with a pretty heinous solution but hope for something a lot cleaner with a bit more time...

Anyway, by assigning the messages through jQuery metadata I'm able to customise them per class.

class="amount {validate:
                {messages:
                  {required:'Amount is required',
                   range: 'Amount must be between 0 and 2,000,000',
                   digits: 'Amount must be numeric'}
                }
              }"

...and so on for each of the fields in my grid rows.

I'll be looking at extending the 'addClassRules' method to accept a messages parameter but for now this works so it'll do.

Answer 2

Since everyone's obviously interested in the response to this one here's the next step in my pursuit of an answer!

I've added methods into the plugin that allow the addition of class messages and amended the default message handler to pick these out.

Added before 'customMetaMessage'

customClassMessage: function (element, method) {
    //Get the elements class(es)
    var classes = $(element).attr("class").split(" ");

    //return any message associated with said class and method
    var m = $.validator.messages[classes[0]];

    return m && (m.constructor == String
        ? m
        : m[method]);
},

Amended 'defaultMessage' to include a call to the above method

defaultMessage: function (element, method) {
                return this.findDefined(
                this.customMessage(element.name, method),
                this.customMetaMessage(element, method),
                this.customClassMessage(element, method),
                // title is never undefined, so handle empty string as undefined
                !this.settings.ignoreTitle && element.title || undefined,
                $.validator.messages[method],
                "<strong>Warning: No message defined for " + element.name + "</strong>"
            );
            },

Added an 'addClassMessages' method

        addClassMessages: function (className, messages) {
        if (className.constructor == String) {
            $.validator.messages[className] = messages != undefined ? messages : $.validator.messages[className];
        }
        else {
            $.extend(this.messages, className);
        }
    },

I haven't been able to work out how to attach these additional methods outside of the plugin as yet. At least I don't have to declare error messages in the 'class' attribute though.

jQuery.validator.addClassMessages({
    amount: {
        required: "Amount is required",
        range: "Amount must be between 0 and 2,000,000",
        digits: "Amount must be numeric"
    }
});

Answer 3

Try this:

jQuery.validator.addClassRules({
    amount: {
        required: true,
        range: [0, 2000000],
        messages: {required: "Required field!", range: "Invalid range!"}
    },
    comment: {
        maxlength: 51,
        messages: {maxlength: "Max 51 characters!"}
    }
})

I think that is what you are looking for, correct?