JQuery移动，验证插件和可折叠的内容块

Question

我对这种情况有问题(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;
}
}
}
}
}
});
});

Answer 1

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

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

仅此而已。请在此处查看它的工作原理：http://jsfiddle.net/ryleyb/LFG8G/1/