0

jQuery Validation プラグインを使用していますが、groupsオプションでは機能しません。つまり、1 つの一般的なエラー メッセージを表示したい電話番号用の 3 つの異なるテキスト ボックスと、通常の必須エラー メッセージを表示したい 1 つのテキスト ボックスがあります。動いていない。

<!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>
4

1 に答える 1