jQuery 验证 : Validating specific group

Question

我正在尝试使用jQuery Validate，我的要求之一是在某些特定组通过向导用户界面时对其进行验证。不过，我似乎无法找到此功能的 jQuery Validate 文档，只能在网上找到非常模糊的引用。

我的声明基本上是这样的；

form.validate({
                    groups: {
                        raceGroup: "race",
                        identityGroup: "name gender age"
                    },
                    rules: {
                        race: {
                            required: true,
                        },
                        gender: {
                            valueNotEquals: "Select Gender ...",
                            required: true
                        },
                        name: {
                            pattern: "^(?!.*[ ]{2})(?!.*[']{2})(?!.*[-]{2})(?:[a-zA-Z0-9 \p{L}'-]{3,64}$)$"
                        }
                    },
                    messages: {
                        race: {
                            required: "this is a required for your character."
                        },
                        name: {
                            pattern: "You have entered an invalid name."
                        },
                        gender: {
                            valueNotEquals: "You must select a valid gender.",
                            required: "You must select a valid gender."
                        }
                    }
                });

好的，我已经定义了组...但是现在怎么办？如何检查组内的所有内容是否有效？ (或无效)

Answer 1

groups: {
    raceGroup: "race",
    identityGroup: "name gender age"
},

"How can I check if everything within a group is valid? (or invalid)"

你不知道。 groups不是这样的选项有效。

使用groups选项，您只是将多个错误消息组合为一个。示例:如果您有一组字段，每个字段都使用 require_from_group规则(任何组外的“一个或多个”字段都是必需的)，groups选项将确保只显示一条消息，而不是在每个输入旁边重复出现。

没有用于创建验证组的定义选项或标准化设置。

如果您尝试采用阶梯式形式，可以采用多种方法。

当我创建多步骤表单时，我使用一组独特的 <form>每个部分的标签。然后我使用 the .valid() method在进入下一个部分之前测试该部分。 (不要忘记首先初始化插件；在 DOM 上的所有表单上调用 .validate() 。)

然后在最后一部分，我使用 .serialize()在每个表单上并将它们连接成要提交的数据查询字符串。

类似这样的事情...

$(document).ready(function() {

    $('#form1').validate({ // initialize form 1
        // rules
    });

    $('#gotoStep2').on('click', function() { // go to step 2
        if ($('#form1').valid()) {
            // code to reveal step 2 and hide step 1
        }
    });

    $('#form2').validate({ // initialize form 2
        // rules
    });

    $('#gotoStep3').on('click', function() { // go to step 3
        if ($('#form2').valid()) {
            // code to reveal step 3 and hide step 2
        }
    });

    $('#form3').validate({ // initialize form 3
        // rules,
        submitHandler: function (form) {
           // serialize and join data for all forms
           // ajax submit
           return false;
        }
    });

    // there is no third click handler since the plugin takes care of this with the
    // built-in submitHandler callback function on the last form.

});

重要的是要记住我的 click上面的处理程序没有使用 type="submit"纽扣。这些是常规按钮，位于form外部标签或 type="button" .

只有最后一个表单上的按钮是常规按钮 type="submit"按钮。那是因为我正在利用插件的内置 submitHandler仅在最后一个表单上使用回调函数。

“概念验证”演示:http://jsfiddle.net/N9UpD/

另外，请参阅引用:

https://stackoverflow.com/a/17975061/594235