この投稿は私の前の質問に基づいています。3つのセクションがあるフォームがあり、ボタンを使用backしnextて、一度に1つのテーブルセクションのみをユーザーに表示および非表示にします。さらに、nextボタンは検証トリガーとしても機能します。
私の質問は：
- 私の検証アプローチでは、ドロップダウンフィールドをチェックできませんでした。
jQuery validation plugin類似した名前のフィールドを検証できるという明確な方法はありますか？たとえば、、、、およびという名前のフィールドがありmm1ます。検証ルールなどのショートカット方法を使用できますか？mm2mm3mm*number組み込みの方法では科学的な入力を検証できないことがわかりました。それを処理する他の組み込み方法はありますか？このために独自のメソッドを追加する必要がありますか？
入力ありがとうございます！これがデモです。
HTML
<form method="post" id="form1" action=index.html>
<table>
<H4 align="center" id="id_tab">
|<a href="#" class="Chemical"> Chemical </a>|
<a href="#" class="Application"> Application </a>|
<a href="#" class="Physical"> Physical </a>|
</H4>
</table><br>
<table class="tab tab_Chemical" border="0">
<tr><th><label for="id_wat_hl">Water Column Half life (days):</label></th>
<td><input type="text" name="wat_hl" id="id_wat_hl" value="1e-08" /></td></tr>
</table>
<table class="tab tab_Application" border="0" style="display:none">
<tr><th scope="col"><label for="id_noa">Number of Applications:</label></th>
<td scope="col"><select name="noa" id="id_noa">
<option value="">Make a selection</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option></select>
</td>
</tr>
</table>
<table class="tab tab_Physical" border="0" style="display:none">
<tr><th><label for="id_mas_tras_cof">Mass Transfer Coefficient (m/s):</label></th>
<td><input type="text" name="mas_tras_cof" id="id_mas_tras_cof" /></td></tr>
</table>
<table align="center">
<tr><td><input class="back" type="button" value="Back" /></td>
<td><input class="next" type="button" value="Next" /></td>
<td><input class="submit" type="submit" value="Submit" /></td></tr>
</table></form>
JS
$(document).ready(function () {
var tab_pool = ["tab_Chemical", "tab_Application", "tab_Physical"];
var visible = $(".tab:visible").attr('class').split(" ")[1];
var curr_ind = $.inArray(visible, tab_pool);
$(".submit").hide();
$(".back").hide();
var validator = $('form').validate({
ignore: 'input[type="button"],input[type="submit"]',
rules: {
wat_hl: {
required: true,
number: true
},
noa: {
required: true
},
mm1: {
required: true
},
mm2: {
required: true
},
mm3: {
required: true
},
dd1: {
required: true
},
dd2: {
required: true
},
dd3: {
required: true
},
mas_tras_cof: {
required: true
}
}
});
$('.next').click(function () {
var tab = $(".tab:visible");
var valid = true;
$('input', tab).each(function (i, v) {
valid = validator.element(v) && valid;
});
if (!valid) {
return;
}
if (curr_ind < 2) {
$(".tab:visible").hide();
curr_ind = curr_ind + 1;
$("." + tab_pool[curr_ind]).show();
$(".submit").hide();
$(".back").show();
}
if (curr_ind == 2) {
$(".submit").show();
$(".next").hide();
}
});
$('.back').click(function () {
if (curr_ind > 0) {
$(".tab:visible").hide();
curr_ind = curr_ind - 1;
$("." + tab_pool[curr_ind]).show();
$(".submit").hide();
$(".next").show();
}
if (curr_ind == 0) {
$(".back").hide();
}
});
var i = 1
$('.tab_Application').append('<tr id="noa_header" style="display:none"><th width="18%">App#</th><th width="18%">Month</th><th width="18%">Day</th>');
$('#id_noa').change(function () {
var total = $(this).val()
$('tr[id*="noa_header"]').show()
while (i <= total) {
$('.tab_Application').append('<tr class="tab_noa1"><td><input type="text" size="5" value="' + i + '" disabled/></td><td><input type="text" size="5" name="mm' + i + '" id="id_mm' + i + '""/></td><td><input type="text" size="5" name="dd' + i + '" id="id_dd' + i + '""/></td>');
i = i + 1;
}
while (i - 1 > total) {
$(".tab_Application tr:last").remove();
i = i - 1
}
$('</table>').appendTo('.tab_Application');
})
});