Using jQuery validation plugin with tabbed navigation
- by user3438917
I have a tabbed navigation wizard, for which the first section needs to be validated before proceeding to the next tab. The validation should trigger when the user hits the "next" button. I am unable to get the validation to trigger though:
<form id="target-group" novalidate="novalidate">
<div class="box">
<div class='box-header-main'><h2><img src="assets/img/list.png" /> Target Group Information</h2></div>
<br />
<div class='box'>
<div class='box-header-property'><h2><span data-bind="text:Name">New Target Group</span> | <i class='fa fa-file'></i></h2></div>
<br />
<div class='row'>
<div id='flight-wizard'>
<div id='content' class='col-lg-12'>
<div class='col-lg-12'>
<div id='tabs'>
<ul>
<li id="targetgroup-info-tab"><a href='#tabs-1'><i class="fa fa-info-circle"></i>Target Group Info</a></li>
<li id="zone-tab"><a href='#tabs-2'><i class="fa fa-map-marker"></i>Zones</a></li>
</ul>
<div id='tabs-1'>
<div class='row'>
<div class='col-xs-6'>
<div class='form-group'>
Name<sup>*</sup>
<input id="selectError0" name="name" class='form-control col-xs-12' data-bind="value: asdf" placeholder='Enter Name ...' />
</div>
<form class='form-horizontal'>
<div class='form-group'>
Product(s)<sup>*</sup>
<div class='controls' id='products'>
<select id='selectError3' class='form-control' data-bind="options:test, optionsText: 'Name', optionsValue : 'test', value: test, optionsCaption: 'Choose Product...'"></select>
</div>
</div>
</form>
</div>
<!--RIGHT PANE-->
<div class='col-xs-6'>
<div class='form-group'>
Platform<sup>*</sup>
<div class='controls'>
<select id="selectError2" class='form-control' data-bind="options:test, optionsText: 'Name', optionsValue: 'test', value : test, optionsCaption: 'Choose Platform...'"></select>
</div>
</div>
<form class='form-horizontal'>
<div class='form-group'>
AdTypes(s)<sup>*</sup>
<div class='controls' id='adtypes'>
<select multiple="" id='adtypesselect' class='form-control' data-rel="chosen" data-bind="options:test, optionsText: 'Name', optionsValue : 'test', selectedOptions: test, optionsCaption: 'test...'"></select>
</div>
</div>
</form>
<button id="btn_cancel_large" class='btn btn-large btn-primary btn-round'><i class='fa fa-ban' /></i> Cancel</button>
<button id="btn-next-large" class='btn btn-large btn-primary btn-round'>Next <i class='fa fa-arrow-circle-right'></i></button>
</div>
<!--end of right pane-->
</div>
</div>
<div id='tabs-2'>
<div class='row'>
<div class='col-lg-12'>
<div class='row'>
<div class='col-lg-12'>
<div id='zones_list' class='box-content'>
<div id='add-new-targetgroupzone' class='add-new'><i class='fa fa-plus-circle'></i><a href='/#/inventory/targeting/' onclick="return false;">Add Zone</a></div>
<table id="results" width="100%">
<thead>
<tr>
<th>Publisher</th>
<th>Property</th>
<th>Zone</th>
<th>AdTypes</th>
<th width='10%'>Quick Actions</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
<br />
<div class="btn_row">
<button id="btn_cancel_large2" class='btn btn-large btn-primary btn-round'><i class='fa fa-ban' /></i> Cancel</button>
<button id="btn-submit-large" class='btn btn-large btn-primary btn-round'>Submit <i class='fa fa-arrow-circle-down'></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
<form id="zones-form" style="display: none;" novalidate="novalidate" class="slideup-form">
<div class="box">
<div class="box-header-panel">
<h2>Add Target Group Zone</h2>
<div class="box-icon" id="zones-form-close">
<i class="fa fa-arrow-circle-down"></i>
</div>
</div>
<div class="box-content clearfix">
<div class="box-content">
<table id="zones-list" width="100%">
<thead>
<tr>
<th>Publisher</th>
<th>Property</th>
<th>Zone</th>
<th>AdTypes</th>
<th width='10%'>Quick Actions</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</form>
jQuery:
$("#target-group").validate({
rules: {
name: {
required: true
}
},
messages: {
name: "Name required",
}
});
$('#btn-next-large').click(function () {
if ($('#target-group').valid()) $tabs.tabs('select', $(this).attr("rel"));
});
