Question

我正在使用jQuery Validation插件，但它不适用于groups选项。即我有三个不同的电话号码文本框，我想要显示一个常见的错误信息，另一个文本框，我想要显示正常的所需错误信息。它不起作用。

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

Answer 1

您的代码中有一个小错误，其中.validate()附加到不存在的id。

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

应该是......

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

否则，您使用groups选项的方式没有任何问题，而且您的代码工作正常......

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

使用提交按钮演示以使其更清晰：http://jsfiddle.net/BScpx/1/

jQuery Validation插件组选项问题

1 个答案: