Question

I have looked everywhere for the answer to this question and while there are many questions that are similar, none work exactly like I want.

I am using JQuery Validator Plugin for a webform. Due to design constraints, I do not want the error message to be appended to the previous element. Currently, I have it working where it adds a specific class to the input that is invalid, using highlight as well as adding a summary to the bottom of the form. No problems there.

However, I find that this alone is not enough as the user really still has no idea why the particular spot is invalid. I have really no space to automatically display the error message; however, I read in the documentation that you can add the error message to the title attribute which is what I want to do. Quoted from, site:

An error message displays a hint for the user about invalid elements, and what is wrong. There are three ways to provide error messages. Via the title attribute of the input element to validate, via error labels and via plugin settings (option messages).

However, it does not show how to actually add the error message to the title attribute. So, here is what I have so far, what can I do in this situation?

FYI: I realize that I will have to add the error messages back in instead of having “” as the message.

$(document).ready(function() {
    $("#popcornOrder").validate({
            rules: {
                fName:      "required",
                lName:      "required",
                street:     "required",
                city:       "required",
                state:      "required",
                zip:        {required: true, ziprange: true},
                accountNum: "required",
                email:      {required: true, email: true},
                pwd:        "required",
                confPwd:    {required: true, equalTo: "#pwd"},
                payment:    "required"
            },
            messages: {
                fName:      "",
                lName:      "",
                street:     "",
                city:       "",
                state:      "",
                zip:        "",
                accountNum: "",
                email:      "",
                pwd:        "",
                confPwd:    "",
                payment:    ""

            },
            highlight:
                function(element) {
                    $(element).addClass('errorBorder');
                },
            unhighlight:
                function(element) {
                    $(element).removeClass('errorBorder');
                },
            invalidHandler: function(form, validator) {
                var errors = validator.numberOfInvalids();
                    if (errors) {
                         var message = errors == 1
                            ? 'You missed 1 field. It has been highlighted'
                            : 'You missed ' + errors + ' fields. They have been highlighted';
                         $("div.error span").html(message);
                         $("div.error").show();
                         } else {
                        $("div.error").hide();
                    }
             },
             focusInvalid: false
    });
});

EDIT: Okay, I did get one step closer: if I add the following line it will add a message to the title attribute (this was just regular ol JQuery), BUT it adds the the message summary to ALL titles. So, the real question then is how to add the specific errors to each of the inputs?

$("input").attr("title", message);

Answer 1

You need to uniquely identify the input.

$("input[name=foo]").attr("title", message);

Where foo is the name of the input. I suspect this will coincide with the name of the rule that was broken (e.g. fName, lName, etc). Obviously you’ll need to do this for each error you have.