jQuery group Validation for multiple textboxes

Question

I am trying to implement jQuery validation on homephone field. Currently my homephone field should contain 10 digit numbers. So I have 3 separate text boxes for that. First and Second text box accepts 3 numbers each whereas the last textbox accepts 4 numbers. Currently the validations are working fine. But what I want is a common message for all the three textboxes. Right now if I leave 1 text box the error message would display fine but as soon as I leave more than 1 text box the error message gets overlayed. Meaning the number of error message = number of textbox left. I want just one error message for any number of text boxes left while entering homephone number.The code is as follows

$("#signup").validate({
        rules: {
            "data[User][homephone1]": {
                required: true,
                number: true,
                minlength: 3,
                maxlength: 3
            },
            "data[User][homephone2]": {
                required: true,
                number: true,
                minlength: 3,
                maxlength: 3
            },
            "data[User][homephone3]": {
                required: true,
                number: true,
                minlength: 4,
                maxlength: 4
            }
        },
        messages: {
            "data[User][homephone1]": {
                required: "Please enter a valid Phone Number",
                number: "",
                minlength: "",
                maxlength: ""
            },
            "data[User][homephone2]": {
                required: "Please enter a valid Phone Number",
                number: "",
                minlength: "",
                maxlength: ""
            },
            "data[User][homephone3]": {
                required: "Please enter a valid Phone Number",
                number: "",
                minlength: "",
                maxlength: ""
            }

There is a group_from attribute but I am not able to implement it.Any help would be really appreciated.

On a side note, you could just use some [form helpers](http://bootstrapformhelpers.com/phone/#jquery-plugins) — Tomanow, Dec 23 '13 at 13:08
you might be looking for something like this http://stackoverflow.com/questions/15136943/jquery-validate-out-of-two-blank-fields-at-least-one-field-must-be-filled-or-b — rajesh kakawat, Dec 23 '13 at 13:12

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

Quote OP:

"Currently the validations are working fine. But what I want is a common message for all the three textboxes. Right now if I leave 1 text box the error message would display fine but as soon as I leave more than 1 text box the error message gets overlayed. Meaning the number of error message = number of textbox left. I want just one error message for any number of text boxes left while entering homephone number."

"There is a group_from attribute but I am not able to implement it."

There is no such thing as a group_from option. However, the groups option will do what you want. It simply combines all error messages for multiple fields into one.

$("#signup").validate({
    rules: {
        "data[User][homephone1]": {
            required: true,
            number: true,
            rangelength: [3, 3]
        },
        "data[User][homephone2]": {
            required: true,
            number: true,
            rangelength: [3, 3]
        },
        "data[User][homephone3]": {
            required: true,
            number: true,
            rangelength: [4, 4]
        }
    },
    messages: {
        "data[User][homephone1]": "Please enter a valid Phone Number",
        "data[User][homephone2]": "Please enter a valid Phone Number",
        "data[User][homephone3]": "Please enter a valid Phone Number"
    },
    groups: {
        phoneGroup: "data[User][homephone1] data[User][homephone2] data[User][homephone3]"
    }
});

The group name, phoneGroup is totally arbitrary and not used anyplace else.
You also have the option to specify one message per field under the messages option.
The minlength and maxlength rules can be combined into the rangelength rule.

Working DEMO: http://jsfiddle.net/JdTZd/

jQuery group Validation for multiple textboxes

1 Answers1