/* ------------------------------------------------------------------------------ * * # Stepy wizard * * Specific JS code additions for wizard_stepy.html page * * Version: 1.1 * Latest update: Dec 25, 2015 * * ---------------------------------------------------------------------------- */ $(function() { // Override defaults $.fn.stepy.defaults.legend = false; $.fn.stepy.defaults.transition = 'fade'; $.fn.stepy.defaults.duration = 150; $.fn.stepy.defaults.backLabel = '<i class="icon-arrow-left13 position-left"></i> Back'; $.fn.stepy.defaults.nextLabel = 'Next <i class="icon-arrow-right14 position-right"></i>'; // Wizard examples // ------------------------------ // Basic wizard setup $(".stepy-basic").stepy(); // Hide step description $(".stepy-no-description").stepy({ description: false }); // Clickable titles $(".stepy-clickable").stepy({ titleClick: true }); // Stepy callbacks $(".stepy-callbacks").stepy({ next: function(index) { alert('Going to step: ' + index); }, back: function(index) { alert('Returning to step: ' + index); }, finish: function() { alert('Submit canceled.'); return false; } }); // // Validation // // Initialize wizard $(".stepy-validation").stepy({ validate: true, block: true, next: function(index) { if (!$(".stepy-validation").validate(validate)) { return false } } }); // Initialize validation var validate = { ignore: 'input[type=hidden], .select2-search__field', // ignore hidden fields errorClass: 'validation-error-label', successClass: 'validation-valid-label', highlight: function(element, errorClass) { $(element).removeClass(errorClass); }, unhighlight: function(element, errorClass) { $(element).removeClass(errorClass); }, // Different components require proper error label placement errorPlacement: function(error, element) { // Styled checkboxes, radios, bootstrap switch if (element.parents('div').hasClass("checker") || element.parents('div').hasClass("choice") || element.parent().hasClass('bootstrap-switch-container') ) { if(element.parents('label').hasClass('checkbox-inline') || element.parents('label').hasClass('radio-inline')) { error.appendTo( element.parent().parent().parent().parent() ); } else { error.appendTo( element.parent().parent().parent().parent().parent() ); } } // Unstyled checkboxes, radios else if (element.parents('div').hasClass('checkbox') || element.parents('div').hasClass('radio')) { error.appendTo( element.parent().parent().parent() ); } // Input with icons and Select2 else if (element.parents('div').hasClass('has-feedback') || element.hasClass('select2-hidden-accessible')) { error.appendTo( element.parent() ); } // Inline checkboxes, radios else if (element.parents('label').hasClass('checkbox-inline') || element.parents('label').hasClass('radio-inline')) { error.appendTo( element.parent().parent() ); } // Input group, styled file input else if (element.parent().hasClass('uploader') || element.parents().hasClass('input-group')) { error.appendTo( element.parent().parent() ); } else { error.insertAfter(element); } }, rules: { email: { email: true } } } // Initialize plugins // ------------------------------ // Apply "Back" and "Next" button styling $('.stepy-step').find('.button-next').addClass('btn btn-primary'); $('.stepy-step').find('.button-back').addClass('btn btn-default'); // Select2 selects $('.select').select2(); // Simple select without search $('.select-simple').select2({ minimumResultsForSearch: Infinity }); // Styled checkboxes and radios $('.styled').uniform({ radioClass: 'choice' }); // Styled file input $('.file-styled').uniform({ fileButtonClass: 'action btn bg-blue' }); });