0

我正在使用 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>
4

1 回答 1

2

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

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

应该...

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

否则，您使用该groups选项的方式没有任何问题，并且您的代码运行良好......

演示：http: //jsfiddle.net/BScpx/

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

于 2013-10-10T13:28:48.963 回答