var FormWizard = function () { return { init: function () { if (!jQuery().bootstrapWizard) { return; } /*-----------------------------------------------------------------------------------*/ /* Show country list in Uniform style /*-----------------------------------------------------------------------------------*/ $("#country_select").select2({ placeholder: "Select your country" }); var wizform = $('#wizForm'); var alert_success = $('.alert-success', wizform); var alert_error = $('.alert-danger', wizform); /*-----------------------------------------------------------------------------------*/ /* Validate the form elements /*-----------------------------------------------------------------------------------*/ wizform.validate({ doNotHideMessage: true, errorClass: 'error-span', errorElement: 'span', rules: { /* Create Account */ email: { required: true, email: true }, password: { minlength: 3, required: true }, name: { required: true }, gender: { required: true }, location: { required: true }, country: { required: true }, phone: { required: true }, /* Payment Details */ card_number: { required: true, minlength: 16, maxlength: 16 }, card_cvc: { required: true, digits: true, minlength: 3, maxlength: 3 }, card_expirydate: { required: true }, card_holder_name: { required: true } }, invalidHandler: function (event, validator) { alert_success.hide(); alert_error.show(); }, highlight: function (element) { $(element) .closest('.form-group').removeClass('has-success').addClass('has-error'); }, unhighlight: function (element) { $(element) .closest('.form-group').removeClass('has-error'); }, success: function (label) { if (label.attr("for") == "gender") { label.closest('.form-group').removeClass('has-error').addClass('has-success'); label.remove(); } else { label.addClass('valid') .closest('.form-group').removeClass('has-error').addClass('has-success'); } } }); /*-----------------------------------------------------------------------------------*/ /* Initialize Bootstrap Wizard /*-----------------------------------------------------------------------------------*/ $('#formWizard').bootstrapWizard({ 'nextSelector': '.nextBtn', 'previousSelector': '.prevBtn', onNext: function (tab, navigation, index) { alert_success.hide(); alert_error.hide(); if (wizform.valid() == false) { return false; } var total = navigation.find('li').length; var current = index + 1; $('.stepHeader', $('#formWizard')).text('Step ' + (index + 1) + ' of ' + total); jQuery('li', $('#formWizard')).removeClass("done"); var li_list = navigation.find('li'); for (var i = 0; i < index; i++) { jQuery(li_list[i]).addClass("done"); } if (current == 1) { $('#formWizard').find('.prevBtn').hide(); } else { $('#formWizard').find('.prevBtn').show(); } if (current >= total) { $('#formWizard').find('.nextBtn').hide(); $('#formWizard').find('.submitBtn').show(); } else { $('#formWizard').find('.nextBtn').show(); $('#formWizard').find('.submitBtn').hide(); } }, onPrevious: function (tab, navigation, index) { alert_success.hide(); alert_error.hide(); var total = navigation.find('li').length; var current = index + 1; $('.stepHeader', $('#formWizard')).text('Step ' + (index + 1) + ' of ' + total); jQuery('li', $('#formWizard')).removeClass("done"); var li_list = navigation.find('li'); for (var i = 0; i < index; i++) { jQuery(li_list[i]).addClass("done"); } if (current == 1) { $('#formWizard').find('.prevBtn').hide(); } else { $('#formWizard').find('.prevBtn').show(); } if (current >= total) { $('#formWizard').find('.nextBtn').hide(); $('#formWizard').find('.submitBtn').show(); } else { $('#formWizard').find('.nextBtn').show(); $('#formWizard').find('.submitBtn').hide(); } }, onTabClick: function (tab, navigation, index) { bootbox.alert('On Tab click is disabled'); return false; }, onTabShow: function (tab, navigation, index) { var total = navigation.find('li').length; var current = index + 1; var $percent = (current / total) * 100; $('#formWizard').find('.progress-bar').css({ width: $percent + '%' }); } }); $('#formWizard').find('.prevBtn').hide(); $('#formWizard .submitBtn').click(function () { bootbox.alert("Form submitted successfully."); }).hide(); } }; }();