JQuery 移动、验证插件和可折叠内容块答案

【问题标题】：JQuery mobile, validation plugin and collapsible content blockJQuery 移动、验证插件和可折叠内容块
【发布时间】：2012-12-12 14:16:50
【问题描述】：

我对这种情况有疑问 (http://jsfiddle.net/LFG8G/)。在我的移动页面中，有一个选择菜单元素，其中包含一组值（在我的示例中为 01,02,03）以及可折叠内容块内的一组其他控件。

表格如下所示：

<div data-role="page" id="pagina">
    <form action="http://www.google.com" method="get" id="form1">
        <div data-role="content">
            <select name="myOption" id="myOption" data-native-menu="false">
                <option value="">&nbsp;</option>
                <option value="01">Value 01</option>
                <option value="02">Value 02</option>
                <option value="03">Value 03</option>

            </select>
            <input type="submit" data-role="button" value="Validate" />
            <div data-role="collapsible">
                <h3>Other fields</h3>
                <div>
                    <div data-role="fieldcontain">
                        <label for="f1"><strong>Field 1</strong></label>
                        <input type="text" name="f1" id="f1" />
                    </div>
                    <div data-role="fieldcontain">
                        <label for="f2"><strong>Field 2</strong></label>
                        <input type="text" name="f2" id="f2" />
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

我必须在向服务器提交数据之前验证字段，并且我使用了 jquery 验证插件。

选择特定选项菜单（项目 01）时，必须填写内容块中的字段。

我已经为此编写了规则，但是当按下按钮验证时，如果用户看不到内容，则不执行验证代码。

javascript 看起来像这样：

    $(document).live('pageshow', function (event, ui) {
        $('#form1').validate({
            ignore:'',
            rules: {
                myOption: {
                    required: true
                },
                f1: {
                    required: {

                        depends: function (el) {
                            if ($('#myOption').val() == "01") {
                                return true;
                            } else {
                                return false;
                            }
                        }
                    }
                },
                f2: {
                    required: {

                        depends: function (el) {
                            if ($('#myOption').val() == "01") {
                                return true;
                            } else {
                                return false;
                            }
                        }
                    }
                }
            }
        });
    });

【问题讨论】：

标签： jquery validation jquery-mobile

【解决方案1】：

默认情况下，验证插件不会验证隐藏字段。您需要做的是在您的验证调用中添加一个选项来关闭它：

$('#form1').validate({
   ignore:'',
   //your other options
});

就是这样。在这里看到它的工作：http://jsfiddle.net/ryleyb/LFG8G/1/

【讨论】：