Add Custom Error Condition and General Error Message for jQuery Validate Plugin

Question

I am working on an in application solution for affords me limited page real estate and therefore cannot apply contained error messages for every required field. I therefore am trying to create a solution that would highlight the affected required fields and only create a custom message for specified fields like email address, telephone and password in my form.

I am presently working with the basic shell(which is working fine for contained messages)

    var v = $("form").validate({
        rules: {
            email: {
                required: true,
                email: true                 
            },
            confirmEmail: {
                required: true,
                email: true,
                equalTo: "#email"
            }
        },
        messages: {
            email: "Please enter a valid email address",
            confirmEmail: {
                required: "Please enter a valid verify email address",
                equalTo: "Both email addresses must be the same."
            }
        },
        errorContainer: errcontainer,
        errorLabelContainer: $("ol", errcontainer),
        wrapper: 'li',
        onkeyup: false,
        onblur: false
    });

Thanks in advance for any help or advice.

What do you need help with? The highlighting of fields in errors? Suppressing unwanted error messages? — Ryley
– Ryley, Commented Jan 12, 2012 at 17:25
I really jus need to understand how to supress the numerous invalid value messages while still having a generalised message and also including custom messages for emails and any other designated fields. — designmode
– designmode, Commented Jan 12, 2012 at 19:54

Ryley · Accepted Answer · 2012-01-12 20:50:44Z

1

What you want to do is implement the showErrors hook in the validate plugin.

You get passed a map of the error messages, and then an array of those same messages associated with the form element that produced them.

Your best bet is then to just take a copy of the default handler (called defaultShowErrors in the validate plugin) and modify it slightly (to only show labels for the ones you care about).

You'd then have something like this in your validate options:

showErrors: function(errorMap, errorList) {
    for (var i = 0; this.errorList[i]; i++) {
        var error = this.errorList[i];
        //this is the only real part you modify
        if (error.element.id == 'email' || error.element.id == 'confirmEmail') {
            this.showLabel(error.element, error.message);
        }
        this.settings.highlight && this.settings.highlight.call(this, error.element, this.settings.errorClass, this.settings.validClass);
    }
    //a whole bunch more stuff after this, from jquery.validate.js
}

See this idea in action here: http://jsfiddle.net/ryleyb/D3tfu/

answered Jan 12, 2012 at 20:50

Ryley

21.3k2 gold badges69 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

designmode Over a year ago

this works great, but my intention is to provide a summary message for the outstanding fields and provide custom messaging for the designated like email etc. Should I be doing this within the showErrors hook too? Ive tried a few options and am yet to get anything to work. Any Ideas?

designmode Over a year ago

one other thing I forgot to mention in my initial question was this form is accordianised and has an additional method to validate contained areas. This solution was provided in this post

Ryley Over a year ago

Yeah, showErrors would be an appropriate place to generate your summary message too.

Collectives™ on Stack Overflow

Add Custom Error Condition and General Error Message for jQuery Validate Plugin

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related