CODEWITHSUNDEEP
jqueryjquery-validate
Anirudh Rautela
Anirudh Rautela

Reputation: 113

jQuery group Validation for multiple textboxes

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.

Upvotes: 1

Views: 1638

Answers (1)

Sparky
Sparky

Reputation: 98738

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/

Upvotes: 1

Related Questions