我有一个表格，其中部分分为选项卡。当用户提交表单时（即输入具有焦点并且他们按下回车键或按下保存按钮），应该验证整个表单，并且我想在选项卡的单击事件上验证第一个选项卡上的元素（显然不是第一个）在第一个选项卡的元素被验证之前不允许移动到另一个选项卡。我似乎继续遇到的问题是，在第一次尝试验证任何内容之后，要验证的规则和元素都已设置，并且不会根据传递一组不同的规则而更新。
编辑：为了澄清，如果您单击选项卡 2，然后填写文本 1 和文本 2 并点击保存，您可以更清楚地看到问题，然后执行完全相反的操作。
非常感谢您对此事的任何想法。提前致谢！
这一切都基于这里的 jquery validate 插件：http: //jqueryvalidation.org/
这是小提琴的链接：http: //jsfiddle.net/Fsb69/
<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript">
var log = function(msg) {
$('ul#log').append('<li>'+msg+'</li>');
},
validate_form = function(elements) {
var params = {
errorLabelContainer: '#message-error',
ignore: [],
wrapper: 'li',
onfocusout: false,
onkeyup: false,
rules: {
text_1: 'required',
text_2: 'required',
text_3: 'required',
text_4: 'required',
},
debug:true
};
if(elements) {
$.each(params.rules, function(k, v) {
if($.inArray(k, elements) < 0) {
delete params.rules[k];
}
});
}
log('params: '+JSON.stringify(params));
return $('form[name=test-form]').validate(params).form();
};
$(function() {
$('span.tab-click').click(function() {
var self = $(this),
selected = self.prop('id').replace('-click', ''),
selected_index = selected.replace('tab-', ''),
elements = ['text_1', 'text_2'];
valid = true;
if(selected_index > 1) {
var valid = validate_form(elements);
log('is valid? '+valid);
}
if(!valid) {
return false;
}
$('div.tab').hide();
$('div#'+selected).show();
});
$('form[name=test-form]').submit(function(e) {
var form = $(this);
e.preventDefault();
var is_valid = validate_form(false);
log('is valid? '+is_valid);
if(is_valid) {
log('success');
$('#message-error').empty().append('<li>Form is validated.</li>');
}
});
});
</script>
<style>
form span {
text-decoration: underline;
color: blue;
cursor: pointer;
}
</style>
</head>
<body>
<form name="test-form">
<span id="tab-click-1" class="tab-click">Tab 1</span> | <span id="tab-click-2" class="tab-click">Tab 2</span><br /><br />
<div class="tab" id="tab-1">
<label for="text_1">Text 1</label><input name="text_1" value="" /><br />
<label for="text_2">Text 2</label><input name="text_2" value="" /><br />
</div>
<div class="tab" id="tab-2" style="display:none;">
<label for="text_3">Text 3</label><input name="text_3" value="" /><br />
<label for="text_4">Text 4</label><input name="text_4" value="" /><br />
</div>
<ul style="display:none; list-style-type: none;" id="message-error"></ul>
<button type="submit">Save</button>
</form>
<h4>Log</h4>
<ul id="log"></ul>
</body>
</html>