我是jQuery的新手，我尝试使用它和验证插件（http://docs.jquery.com/Plugins/Validation）创建一个包含不同部分的多个标签的多部分表单。现在，我有它有多个标签和＆＃34;下一个＆＃34;和＆＃34;上一页＆＃34;按钮切换到下一个选项卡。 我遇到的问题是如何将我的验证与我的多个标签合并。 感谢。
<div class="tabbable">
<form class="form-horizontal" id="validation-form" method="POST" action="Fanalisis/analisisProses.php">
<div id="tabs">
<ul class="nav nav-tabs padding-18">
<li class="active">
<a data-toggle="tab" href="#lokasi">
<i class="green icon-location-arrow bigger-120"></i>
Lokasi dan Pasokan Air Minimum
</a>
</li>
<li>
<a data-toggle="tab" href="#laju">
<i class="orange icon-bolt bigger-120"></i>
Laju Penerapan Air
</a>
</li>
<li>
<a data-toggle="tab" href="#potensi">
<i class="blue icon-anchor bigger-120"></i>
Potensi Pengangkutan Air
</a>
</li>
<li>
<a data-toggle="tab" href="#result">
<i class="pink icon-fire-extinguisher bigger-120"></i>
Result
</a>
</li>
</ul>
<div class="tab-content no-border padding-24">
<!--LOKASI-->
<div id="lokasi" class="tab-pane in active">
....
<div class="hr hr10 hr-double"></div>\
<ul class="pager pull-right">
<li class="previous disabled">
<a class="prevtab" href="#">← Prev</a>
</li>
<li class="next">
<a class="nexttab" href="#laju">Next →</a>
</li>
</ul>
</div>
<!--END LOKASI-->
<!--LAJU-->
<div id="laju" class="tab-pane">
...
<div class="hr hr10 hr-double"></div>
<ul class="pager pull-right">
<li class="previous">
<a class="prevtab" href="#lokasi">← Prev</a>
</li>
<li class="next">
<a class="nexttab" href="#potensi">Next →</a>
</li>
</ul>
</div>
<!--END LAJU-->
<!--POTENSI-->
<div id="potensi" class="tab-pane">
...
<div class="hr hr10 hr-double"></div>
<ul class="pager pull-right">
<li class="previous">
<a class="prevtab" href="#laju">← Prev</a>
</li>
<li class="next">
<a class="nexttab" href="#result">Next →</a>
</li>
</ul>
</div>
<!--END POTENSI-->
<!--RESULT-->
<div id="result" class="tab-pane">
....
<div class="form-actions">
<div class="pull-right">
<button class="btn">
<i class="icon-arrow-left bigger-110"></i>
Kembali
</button>
<button class="btn btn-info" type="submit">
<i class="icon-ok"></i>
Submit
</button>
</div>
</div>
</div>
<!--END RESULT-->
</div>
</div>
</form>
</div>
此标签＆＃34; next＆＃34;和＆＃34; prev＆＃34;代码。
$('.nexttab').click(function() {
$('.nav-tabs > .active').next('li').find('a').trigger('click');
});
$('.prevtab').click(function() {
$('.nav-tabs > .active').prev('li').find('a').trigger('click');
});
这是我的验证码。
$(function() {
$('#validation-form').show();
//documentation : http://docs.jquery.com/Plugins/Validation/validate
$('#validation-form').validate({
errorElement: 'span',
errorClass: 'help-block',
focusInvalid: false,
rules: {
kecamatan: {
required: true
},
nama_tipe_baru1: {
required: true
},
nilai_tipe_baru1: {
required: true
},
nama_tipe_baru2: {
required: true
},
nilai_tipe_baru2: {
required: true
},
desa: {
required: true
},
sumber_air_: {
required: true
},
exposure: {
required: true
},
tipe_proteksi: {
required: true
},
nilai_bangunan1: {
required: true
},
nilai_bangunan2: {
required: true
},
angka_kostruksi1: {
required: true
},
angka_kostruksi2: {
required: true
},
tinggi1: {
required: true
},
tinggi2: {
required: true
},
tepol: {
required: true
}
},
messages: {
kecamatan: "Mohon untuk memilih lokasi kecamatan.",
desa: "Mohon untuk memilih lokasi desa.",
sumber_air_: "Mohon untuk memilih sumber air.",
tipe_proteksi: "Mohon untuk memilih tipe proteksi kebakaran.",
exposure: "Mohon untuk memilih.",
tepol: "Mohon untuk memilih."
},
invalidHandler: function(event, validator) { //display error alert on form submit
$('.alert-error', $('.login-form')).show();
},
highlight: function(e) {
$(e).closest('.control-group').removeClass('info').addClass('error');
},
success: function(e) {
$(e).closest('.control-group').removeClass('error').addClass('info');
$(e).remove();
},
errorPlacement: function(error, element) {
if (element.is(':checkbox') || element.is(':radio')) {
var controls = element.closest('.controls');
if (controls.find(':checkbox,:radio').length > 1)
controls.append(error);
else
error.insertAfter(element.nextAll('.lbl:eq(0)').eq(0));
}
else if (element.is('.select2')) {
error.insertAfter(element.siblings('[class*="select2-container"]:eq(0)'));
}
else if (element.is('.chzn-select')) {
error.insertAfter(element.siblings('[class*="chzn-container"]:eq(0)'));
}
else
error.insertAfter(element);
},
submitHandler: function(form) {
var url = "Fanalisis/analisisProses.php";
// mengambil nilai dari inputbox, textbox dan select
var v_kec = $('select[name=kecamatan]').val();
var v_air = $('select[name=sumber_air]').val();
var v_desa = $('select[name=desa]').val();
var v_bangunan1 = $('input:text[name=nilai_bangunan1]').val();
var v_bangunan2 = $('input:text[name=nilai_bangunan2]').val();
var v_akons1 = $('select[name=angka_konstruksi1]').val();
var v_akons2 = $('select[name=angka_konstruksi2]').val();
var v_tinggi1 = $('input:text[name=tinggi1]').val();
var v_tinggi2 = $('input:text[name=tinggi2]').val();
var v_exposure = $('input:radio[name=exposure]').val();
var v_tepol = $('input:radio[name=tepol]').val();
//var v_hasil1 = $('input:text[name=hasil1]').val();
//var v_hasil2 = $('input:text[name=hasil2]').val();
$.post(url, {tinggi2: v_tinggi2, desa: v_desa, kecamatan: v_kec, sumber_air: v_air, nilai_bangunan1: v_bangunan1, nilai_bangunan2: v_bangunan2, angka_konstruksi1: v_akons1, angka_konstruksi2: v_akons2, tinggi1: v_tinggi1, exposure: v_exposure, tepol: v_tepol, hasil1: v_hasil1, hasil2: v_hasil2}, function() {
})
},
invalidHandler: function(form) {
}
});
});