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