Using jQuery validation plugin with tabbed navigation

Posted by user3438917 on Stack Overflow See other posts from Stack Overflow or by user3438917
Published on 2014-06-05T15:03:16Z Indexed on 2014/06/05 15:25 UTC
Read the original article Hit count: 297

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&nbsp;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&nbsp;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"));
});

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about jquery-ui