javascript - jQuery Validation validate all steps in a multi-part form -
i'm made multi-part registration form, using jquery validation. problem clicking next button in first fieldset, validation works fine. in next fieldset, active fieldset slid , ignores validation, scenario same others.
<script> $(document).ready(function () { // required fields var fields = [ { package: 'required' }, { fname: 'required', lname: 'required' } ]; // messages var msgs = [ { package: 'please select package.' }, { fname: 'please enter first name.', lname: 'please enter last name.' } ]; // index of active fieldset var active = $('fieldset.active').index() - 1; // want single method next button $('.next').click(function () { $('#register').validate({ ignore: [], rules: fields[active], messages: msgs[active] }).form(); if ($('#register').valid()) { // set current fieldset inactive $(this).parents('fieldset.active') .slideup() .removeclass('active') .next() .slidedown() .addclass('active'); } }); // not $('.next').eq(0).click(function () { // same contents }); $('.next').eq(1).click(function () { // same contents }); $('.next').eq(2).click(function () { // same contents }); // ... }); </script> <form id="register" method="post"> <fieldset class="active"> <!-- set active default --> <legend>select package</legend> <select name="package"> <option value="" selected>select</option> <option value="basic">basic</option> <option value="pro">pro</option> <option value="premium">premium</option> <option value="elite">elite</option> </select> <input type="button" class="next" value="next" /> </fieldset> <fieldset> <legend>your personal info</legend> <ul> <li> <input type="text" name="fname" placeholder="first name" /> </li> <li> <input type="text" name="lname" placeholder="last name" /> </li> </ul> </fieldset> <!-- more fieldsets --> </form> i want validate per fieldset upon clicking next button
ideas appreciated. thanks!
try this, bootstrap-multi-step-registration-form.
view page-source ctrl+u idea of code.
Comments
Post a Comment