4 つのタブを持つフォームがあり、ユーザーが他のタブをクリックしたときに新しいタブに切り替わる前に、現在のタブを検証できるようにしたいと考えています。これは私がこれまでに持っているものです:
$("#tabs").tabs({
beforeActivate: function(event, ui) {
var tab = ui.oldTab.index();
var valid = true;
if (tab == 0 && ($('#txbYPSchool').val() == "" || $('#txbYPSubjectDesc').val() == "")) {
valid = false;
};
if (!valid) {
//alert('not valid');
event.preventDefault();
}
else {
alert('valid');
}
}
});
上記の関数は、一部のフィールドが入力されていない場合、ユーザーが別のタブを選択できないようにします。また、次のように検証関数を設定しています。
$("#form1").validate({
rules: {
txbYPSchool: { required: true, nowhitespace: true },
txbYPSubjectDesc: { required: true, nowhitespace: true }
},
messages: {
txbYPSchool: "*This field is mandatory. If not in school, type 'Not in School'",
txbYPSubjectDesc: "*This field is mandatory"
},
ignore: ""
});
現在のタブにまだ不完全なフィールドがあるときにユーザーがタブを変更しようとしたときに、検証を実行してエラー メッセージを表示するにはどうすればよいですか? ボタンをクリックせずに、ユーザーがタブを変更しようとしたときにのみこれを実行できるようにしたいのですが、検証機能を最初の機能に組み込む方法がわかりません。
jquery 1.9.1 と最新の検証プラグインを使用しています。
ありがとう