セクションがタブに分割されたフォームがあります。ユーザーがフォームを送信したとき (つまり、入力にフォーカスがあり、Enter キーを押すか、保存ボタンが押されたとき) にフォーム全体を検証する必要があり、タブのクリック イベントで最初のタブの要素を検証したい (最初のもの以外は明らかに) 最初のタブの要素が検証される前に別のタブに移動することを禁止します。私が引き続き遭遇しているように見える問題は、何かを検証する最初の試みの後、検証されるルールと要素が設定され、別のルールセットの通過に基づいて更新されないことです。
編集: 明確にするために、タブ 2 をクリックし、テキスト 1 とテキスト 2 を入力して [保存] をクリックし、正反対の操作を行うと、問題をより明確に確認できます。
この問題に関するご意見は大歓迎です。前もって感謝します！
これはすべて、こちらの jquery 検証プラグインに基づいています: 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>