333 lines
9.3 KiB
JavaScript
333 lines
9.3 KiB
JavaScript
|
/*
|
||
|
|
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]);
|