3

我正在尝试使用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."
                        }
                    }
                });

好的，所以我已经定义了组......但是现在呢？如何检查组内的所有内容是否有效？（或无效）

4

1 回答 1

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

“如何检查组内的所有内容是否有效？（或无效）”

你没有。这不是该groups选项的工作方式。

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

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

如果您尝试制作阶梯式，则有多种方法。

当我创建多步骤表单时，我<form>为每个部分使用一组唯一的标签。然后我使用该.valid()方法测试该部分，然后再转到下一个。 （不要忘记首先初始化插件；.validate()在 DOM 上的所有表单上调用 , 准备就绪。）

然后在最后一部分，我.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"按钮。这些是常规按钮，位于标签之外或.formtype="button"

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

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

另外，请参阅以供参考：

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

于 2013-09-25T20:00:19.050 回答