/* Name: Forms / Wizard - Examples Written by: Okler Themes - (http://www.okler.net) Theme Version: 2.1.1 */ (function($) { 'use strict'; /* Wizard #1 */ var $w1finish = $('#w1').find('ul.pager li.finish'), $w1validator = $("#w1 form").validate({ highlight: function(element) { $(element).closest('.form-group').removeClass('has-success').addClass('has-error'); }, success: function(element) { $(element).closest('.form-group').removeClass('has-error'); $(element).remove(); }, errorPlacement: function( error, element ) { element.parent().append( error ); } }); $w1finish.on('click', function( ev ) { ev.preventDefault(); var validated = $('#w1 form').valid(); if ( validated ) { new PNotify({ title: 'Congratulations', text: 'You completed the wizard form.', type: 'custom', addclass: 'notification-success', icon: 'fas fa-check' }); } }); $('#w1').bootstrapWizard({ tabClass: 'wizard-steps', nextSelector: 'ul.pager li.next', previousSelector: 'ul.pager li.previous', firstSelector: null, lastSelector: null, onNext: function( tab, navigation, index, newindex ) { var validated = $('#w1 form').valid(); if( !validated ) { $w1validator.focusInvalid(); return false; } }, onTabClick: function( tab, navigation, index, newindex ) { if ( newindex == index + 1 ) { return this.onNext( tab, navigation, index, newindex); } else if ( newindex > index + 1 ) { return false; } else { return true; } }, onTabChange: function( tab, navigation, index, newindex ) { var totalTabs = navigation.find('li').length - 1; $w1finish[ newindex != totalTabs ? 'addClass' : 'removeClass' ]( 'hidden' ); $('#w1').find(this.nextSelector)[ newindex == totalTabs ? 'addClass' : 'removeClass' ]( 'hidden' ); tab.removeClass('active'); } }); /* Wizard #2 */ var $w2finish = $('#w2').find('ul.pager li.finish'), $w2validator = $("#w2 form").validate({ highlight: function(element) { $(element).closest('.form-group').removeClass('has-success').addClass('has-error'); }, success: function(element) { $(element).closest('.form-group').removeClass('has-error'); $(element).remove(); }, errorPlacement: function( error, element ) { element.parent().append( error ); } }); $w2finish.on('click', function( ev ) { ev.preventDefault(); var validated = $('#w2 form').valid(); if ( validated ) { new PNotify({ title: 'Congratulations', text: 'You completed the wizard form.', type: 'custom', addclass: 'notification-success', icon: 'fas fa-check' }); } }); $('#w2').bootstrapWizard({ tabClass: 'wizard-steps', nextSelector: 'ul.pager li.next', previousSelector: 'ul.pager li.previous', firstSelector: null, lastSelector: null, onNext: function( tab, navigation, index, newindex ) { var validated = $('#w2 form').valid(); if( !validated ) { $w2validator.focusInvalid(); return false; } }, onTabClick: function( tab, navigation, index, newindex ) { if ( newindex == index + 1 ) { return this.onNext( tab, navigation, index, newindex); } else if ( newindex > index + 1 ) { return false; } else { return true; } }, onTabChange: function( tab, navigation, index, newindex ) { var totalTabs = navigation.find('li').length - 1; $w2finish[ newindex != totalTabs ? 'addClass' : 'removeClass' ]( 'hidden' ); $('#w2').find(this.nextSelector)[ newindex == totalTabs ? 'addClass' : 'removeClass' ]( 'hidden' ); } }); /* Wizard #3 */ var $w3finish = $('#w3').find('ul.pager li.finish'), $w3validator = $("#w3 form").validate({ highlight: function(element) { $(element).closest('.form-group').removeClass('has-success').addClass('has-error'); }, success: function(element) { $(element).closest('.form-group').removeClass('has-error'); $(element).remove(); }, errorPlacement: function( error, element ) { element.parent().append( error ); } }); $w3finish.on('click', function( ev ) { ev.preventDefault(); var validated = $('#w3 form').valid(); if ( validated ) { new PNotify({ title: 'Congratulations', text: 'You completed the wizard form.', type: 'custom', addclass: 'notification-success', icon: 'fas fa-check' }); } }); $('#w3').bootstrapWizard({ tabClass: 'wizard-steps', nextSelector: 'ul.pager li.next', previousSelector: 'ul.pager li.previous', firstSelector: null, lastSelector: null, onNext: function( tab, navigation, index, newindex ) { var validated = $('#w3 form').valid(); if( !validated ) { $w3validator.focusInvalid(); return false; } }, onTabClick: function( tab, navigation, index, newindex ) { if ( newindex == index + 1 ) { return this.onNext( tab, navigation, index, newindex); } else if ( newindex > index + 1 ) { return false; } else { return true; } }, onTabChange: function( tab, navigation, index, newindex ) { var $total = navigation.find('li').length - 1; $w3finish[ newindex != $total ? 'addClass' : 'removeClass' ]( 'hidden' ); $('#w3').find(this.nextSelector)[ newindex == $total ? 'addClass' : 'removeClass' ]( 'hidden' ); }, onTabShow: function( tab, navigation, index ) { var $total = navigation.find('li').length - 1; var $current = index; var $percent = Math.floor(( $current / $total ) * 100); navigation.find('li').removeClass('active'); navigation.find('li').eq( $current ).addClass('active'); $('#w3').find('.progress-indicator').css({ 'width': $percent + '%' }); tab.prevAll().addClass('completed'); tab.nextAll().removeClass('completed'); } }); /* Wizard #4 */ var $w4finish = $('#w4').find('ul.pager li.finish'), $w4validator = $("#w4 form").validate({ highlight: function(element) { $(element).closest('.form-group').removeClass('has-success').addClass('has-error'); }, success: function(element) { $(element).closest('.form-group').removeClass('has-error'); $(element).remove(); }, errorPlacement: function( error, element ) { element.parent().append( error ); } }); $w4finish.on('click', function( ev ) { ev.preventDefault(); var validated = $('#w4 form').valid(); if ( validated ) { new PNotify({ title: 'Congratulations', text: 'You completed the wizard form.', type: 'custom', addclass: 'notification-success', icon: 'fas fa-check' }); } }); $('#w4').bootstrapWizard({ tabClass: 'wizard-steps', nextSelector: 'ul.pager li.next', previousSelector: 'ul.pager li.previous', firstSelector: null, lastSelector: null, onNext: function( tab, navigation, index, newindex ) { var validated = $('#w4 form').valid(); if( !validated ) { $w4validator.focusInvalid(); return false; } }, onTabClick: function( tab, navigation, index, newindex ) { if ( newindex == index + 1 ) { return this.onNext( tab, navigation, index, newindex); } else if ( newindex > index + 1 ) { return false; } else { return true; } }, onTabChange: function( tab, navigation, index, newindex ) { var $total = navigation.find('li').length - 1; $w4finish[ newindex != $total ? 'addClass' : 'removeClass' ]( 'hidden' ); $('#w4').find(this.nextSelector)[ newindex == $total ? 'addClass' : 'removeClass' ]( 'hidden' ); }, onTabShow: function( tab, navigation, index ) { var $total = navigation.find('li').length - 1; var $current = index; var $percent = Math.floor(( $current / $total ) * 100); navigation.find('li').removeClass('active'); navigation.find('li').eq( $current ).addClass('active'); $('#w4').find('.progress-indicator').css({ 'width': $percent + '%' }); tab.prevAll().addClass('completed'); tab.nextAll().removeClass('completed'); } }); /* Wizard #5 */ var $w5finish = $('#w5').find('ul.pager li.finish'), $w5validator = $("#w5 form").validate({ highlight: function(element) { $(element).closest('.form-group').removeClass('has-success').addClass('has-error'); }, success: function(element) { $(element).closest('.form-group').removeClass('has-error'); $(element).remove(); }, errorPlacement: function( error, element ) { element.parent().append( error ); } }); $w5finish.on('click', function( ev ) { ev.preventDefault(); var validated = $('#w5 form').valid(); if ( validated ) { new PNotify({ title: 'Congratulations', text: 'You completed the wizard form.', type: 'custom', addclass: 'notification-success', icon: 'fas fa-check' }); } }); $('#w5').bootstrapWizard({ tabClass: 'wizard-steps', nextSelector: 'ul.pager li.next', previousSelector: 'ul.pager li.previous', firstSelector: null, lastSelector: null, onNext: function( tab, navigation, index, newindex ) { var validated = $('#w5 form').valid(); if( !validated ) { $w5validator.focusInvalid(); return false; } }, onTabChange: function( tab, navigation, index, newindex ) { var $total = navigation.find('li').length - 1; $w5finish[ newindex != $total ? 'addClass' : 'removeClass' ]( 'hidden' ); $('#w5').find(this.nextSelector)[ newindex == $total ? 'addClass' : 'removeClass' ]( 'hidden' ); }, onTabShow: function( tab, navigation, index ) { var $total = navigation.find('li').length; var $current = index + 1; var $percent = ( $current / $total ) * 100; $('#w5').find('.progress-bar').css({ 'width': $percent + '%' }); } }); }).apply(this, [jQuery]);