jQuery Validation plugin groups option issue

Question

I am using jQuery Validation plugin but it's not working with groups option. i.e. I have three different text boxes for phone number for which I want to show one common error message and one other textbox for which I want to show normal required error message. It's not working.

<!DOCTYPE html>
<html>
<head>

    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script type="text/javascript" src="jquery_validation.js"></script>
    <style>

        .error{
            color: hsl(0, 100%, 50%);
            float: left;
            font: 10px/17px "Lato Reg",arial;
            width: 50%;
        }
    </style>
    <script>
        $(document).ready(function() {

            $("#myForm").validate({
                groups: {
                    phoneNumber: "phone_no_1 phone_no_2 phone_no_3"
                },
                rules: {
                    'input1': {
                        required: true
                    },
                    'phone_no_1': {
                        required: true,
                        minlength: 3,
                        maxlength: 3,
                        number: true
                    },
                    'phone_no_2': {
                        required: true,
                        minlength: 3,
                        maxlength: 3,
                        number: true
                    },
                    'phone_no_3': {
                        required: true,
                        minlength: 4,
                        maxlength: 4,
                        number: true
                    }
                },
            });
        });
    </script>
</head>
<body>
    <form id="form1">
        <div>

            <div>
                <input type="text" name="input1" id="input1"  class="input1"/>
            </div>

            <div class="1">
                <p><input type="text" name="phone_no_1"  id="phone_no_1"  /></p>

            </div>
            <div class="2">
                <p><input type="text" name="phone_no_2" id="phone_no_2"  /></p>

            </div>
            <div class="3" >
                <p><input type="text" name="phone_no_3"   id="phone_no_3"  /></p>

            </div>
            <div class="clear"></div>

        </div>

    </form>

 </body>
 </html>

All the names in your group are the same. Is that in the real code or a copying error? — Barmar, Oct 10 '13 at 09:12
Once you attach `.validate()` to the proper `id`, your code is working fine. Nothing wrong with `groups` option: http://jsfiddle.net/BScpx/ — Sparky, Oct 10 '13 at 13:29

Sparky · Answer 1 · 2013-10-10T13:33:56.250

You had one minor error in your code where you attached .validate() to a non-existent id.

$("#myForm").validate({ // <-- no such id in markup called "myForm"
    ...

should be...

$("#form1").validate({ // <-- you have to target your form id here
    ...

Otherwise, there is nothing wrong with the way you've used the groups option, and your code is working perfectly fine...

DEMO: http://jsfiddle.net/BScpx/

Demo with a submit button to make it more clear: http://jsfiddle.net/BScpx/1/

jQuery Validation plugin groups option issue

1 Answers1