Details | Last modification | View Log | RSS feed
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 1 | espaco | 1 | var FormWizard = function () { |
| 2 | |||
| 3 | |||
| 4 | return { |
||
| 5 | //main function to initiate the module |
||
| 6 | init: function () { |
||
| 7 | if (!jQuery().bootstrapWizard) { |
||
| 8 | return; |
||
| 9 | } |
||
| 10 | |||
| 11 | function format(state) { |
||
| 12 | if (!state.id) return state.text; // optgroup |
||
| 13 | return "<img class='flag' src='../../assets/global/img/flags/" + state.id.toLowerCase() + ".png'/> " + state.text; |
||
| 14 | } |
||
| 15 | |||
| 16 | $("#country_list").select2({ |
||
| 17 | placeholder: "Select", |
||
| 18 | allowClear: true, |
||
| 19 | formatResult: format, |
||
| 20 | width: 'auto', |
||
| 21 | formatSelection: format, |
||
| 22 | escapeMarkup: function (m) { |
||
| 23 | return m; |
||
| 24 | } |
||
| 25 | }); |
||
| 26 | |||
| 27 | var form = $('#submit_form'); |
||
| 28 | var error = $('.alert-danger', form); |
||
| 29 | var success = $('.alert-success', form); |
||
| 30 | |||
| 31 | form.validate({ |
||
| 32 | doNotHideMessage: true, //this option enables to show the error/success messages on tab switch. |
||
| 33 | errorElement: 'span', //default input error message container |
||
| 34 | errorClass: 'help-block help-block-error', // default input error message class |
||
| 35 | focusInvalid: false, // do not focus the last invalid input |
||
| 36 | rules: { |
||
| 37 | //account |
||
| 38 | username: { |
||
| 39 | minlength: 5, |
||
| 40 | required: true |
||
| 41 | }, |
||
| 42 | password: { |
||
| 43 | minlength: 5, |
||
| 44 | required: true |
||
| 45 | }, |
||
| 46 | rpassword: { |
||
| 47 | minlength: 5, |
||
| 48 | required: true, |
||
| 49 | equalTo: "#submit_form_password" |
||
| 50 | }, |
||
| 51 | //profile |
||
| 52 | fullname: { |
||
| 53 | required: true |
||
| 54 | }, |
||
| 55 | email: { |
||
| 56 | required: true, |
||
| 57 | email: true |
||
| 58 | }, |
||
| 59 | phone: { |
||
| 60 | required: true |
||
| 61 | }, |
||
| 62 | gender: { |
||
| 63 | required: true |
||
| 64 | }, |
||
| 65 | address: { |
||
| 66 | required: true |
||
| 67 | }, |
||
| 68 | city: { |
||
| 69 | required: true |
||
| 70 | }, |
||
| 71 | country: { |
||
| 72 | required: true |
||
| 73 | }, |
||
| 74 | //payment |
||
| 75 | card_name: { |
||
| 76 | required: true |
||
| 77 | }, |
||
| 78 | card_number: { |
||
| 79 | minlength: 16, |
||
| 80 | maxlength: 16, |
||
| 81 | required: true |
||
| 82 | }, |
||
| 83 | card_cvc: { |
||
| 84 | digits: true, |
||
| 85 | required: true, |
||
| 86 | minlength: 3, |
||
| 87 | maxlength: 4 |
||
| 88 | }, |
||
| 89 | card_expiry_date: { |
||
| 90 | required: true |
||
| 91 | }, |
||
| 92 | 'payment[]': { |
||
| 93 | required: true, |
||
| 94 | minlength: 1 |
||
| 95 | } |
||
| 96 | }, |
||
| 97 | |||
| 98 | messages: { // custom messages for radio buttons and checkboxes |
||
| 99 | 'payment[]': { |
||
| 100 | required: "Please select at least one option", |
||
| 101 | minlength: jQuery.validator.format("Please select at least one option") |
||
| 102 | } |
||
| 103 | }, |
||
| 104 | |||
| 105 | errorPlacement: function (error, element) { // render error placement for each input type |
||
| 106 | if (element.attr("name") == "gender") { // for uniform radio buttons, insert the after the given container |
||
| 107 | error.insertAfter("#form_gender_error"); |
||
| 108 | } else if (element.attr("name") == "payment[]") { // for uniform checkboxes, insert the after the given container |
||
| 109 | error.insertAfter("#form_payment_error"); |
||
| 110 | } else { |
||
| 111 | error.insertAfter(element); // for other inputs, just perform default behavior |
||
| 112 | } |
||
| 113 | }, |
||
| 114 | |||
| 115 | invalidHandler: function (event, validator) { //display error alert on form submit |
||
| 116 | success.hide(); |
||
| 117 | error.show(); |
||
| 118 | App.scrollTo(error, -200); |
||
| 119 | }, |
||
| 120 | |||
| 121 | highlight: function (element) { // hightlight error inputs |
||
| 122 | $(element) |
||
| 123 | .closest('.form-group').removeClass('has-success').addClass('has-error'); // set error class to the control group |
||
| 124 | }, |
||
| 125 | |||
| 126 | unhighlight: function (element) { // revert the change done by hightlight |
||
| 127 | $(element) |
||
| 128 | .closest('.form-group').removeClass('has-error'); // set error class to the control group |
||
| 129 | }, |
||
| 130 | |||
| 131 | success: function (label) { |
||
| 132 | if (label.attr("for") == "gender" || label.attr("for") == "payment[]") { // for checkboxes and radio buttons, no need to show OK icon |
||
| 133 | label |
||
| 134 | .closest('.form-group').removeClass('has-error').addClass('has-success'); |
||
| 135 | label.remove(); // remove error label here |
||
| 136 | } else { // display success icon for other inputs |
||
| 137 | label |
||
| 138 | .addClass('valid') // mark the current input as valid and display OK icon |
||
| 139 | .closest('.form-group').removeClass('has-error').addClass('has-success'); // set success class to the control group |
||
| 140 | } |
||
| 141 | }, |
||
| 142 | |||
| 143 | submitHandler: function (form) { |
||
| 144 | success.show(); |
||
| 145 | error.hide(); |
||
| 146 | form[0].submit(); |
||
| 147 | //add here some ajax code to submit your form or just call form.submit() if you want to submit the form without ajax |
||
| 148 | } |
||
| 149 | |||
| 150 | }); |
||
| 151 | |||
| 152 | var displayConfirm = function() { |
||
| 153 | $('#tab4 .form-control-static', form).each(function(){ |
||
| 154 | var input = $('[name="'+$(this).attr("data-display")+'"]', form); |
||
| 155 | if (input.is(":radio")) { |
||
| 156 | input = $('[name="'+$(this).attr("data-display")+'"]:checked', form); |
||
| 157 | } |
||
| 158 | if (input.is(":text") || input.is("textarea")) { |
||
| 159 | $(this).html(input.val()); |
||
| 160 | } else if (input.is("select")) { |
||
| 161 | $(this).html(input.find('option:selected').text()); |
||
| 162 | } else if (input.is(":radio") && input.is(":checked")) { |
||
| 163 | $(this).html(input.attr("data-title")); |
||
| 164 | } else if ($(this).attr("data-display") == 'payment[]') { |
||
| 165 | var payment = []; |
||
| 166 | $('[name="payment[]"]:checked', form).each(function(){ |
||
| 167 | payment.push($(this).attr('data-title')); |
||
| 168 | }); |
||
| 169 | $(this).html(payment.join("<br>")); |
||
| 170 | } |
||
| 171 | }); |
||
| 172 | } |
||
| 173 | |||
| 174 | var handleTitle = function(tab, navigation, index) { |
||
| 175 | var total = navigation.find('li').length; |
||
| 176 | var current = index + 1; |
||
| 177 | // set wizard title |
||
| 178 | $('.step-title', $('#form_wizard_1')).text('Step ' + (index + 1) + ' of ' + total); |
||
| 179 | // set done steps |
||
| 180 | jQuery('li', $('#form_wizard_1')).removeClass("done"); |
||
| 181 | var li_list = navigation.find('li'); |
||
| 182 | for (var i = 0; i < index; i++) { |
||
| 183 | jQuery(li_list[i]).addClass("done"); |
||
| 184 | } |
||
| 185 | |||
| 186 | if (current == 1) { |
||
| 187 | $('#form_wizard_1').find('.button-previous').hide(); |
||
| 188 | } else { |
||
| 189 | $('#form_wizard_1').find('.button-previous').show(); |
||
| 190 | } |
||
| 191 | |||
| 192 | if (current >= total) { |
||
| 193 | $('#form_wizard_1').find('.button-next').hide(); |
||
| 194 | $('#form_wizard_1').find('.button-submit').show(); |
||
| 195 | displayConfirm(); |
||
| 196 | } else { |
||
| 197 | $('#form_wizard_1').find('.button-next').show(); |
||
| 198 | $('#form_wizard_1').find('.button-submit').hide(); |
||
| 199 | } |
||
| 200 | App.scrollTo($('.page-title')); |
||
| 201 | } |
||
| 202 | |||
| 203 | // default form wizard |
||
| 204 | $('#form_wizard_1').bootstrapWizard({ |
||
| 205 | 'nextSelector': '.button-next', |
||
| 206 | 'previousSelector': '.button-previous', |
||
| 207 | onTabClick: function (tab, navigation, index, clickedIndex) { |
||
| 208 | return false; |
||
| 209 | |||
| 210 | success.hide(); |
||
| 211 | error.hide(); |
||
| 212 | if (form.valid() == false) { |
||
| 213 | return false; |
||
| 214 | } |
||
| 215 | |||
| 216 | handleTitle(tab, navigation, clickedIndex); |
||
| 217 | }, |
||
| 218 | onNext: function (tab, navigation, index) { |
||
| 219 | success.hide(); |
||
| 220 | error.hide(); |
||
| 221 | |||
| 222 | if (form.valid() == false) { |
||
| 223 | return false; |
||
| 224 | } |
||
| 225 | |||
| 226 | handleTitle(tab, navigation, index); |
||
| 227 | }, |
||
| 228 | onPrevious: function (tab, navigation, index) { |
||
| 229 | success.hide(); |
||
| 230 | error.hide(); |
||
| 231 | |||
| 232 | handleTitle(tab, navigation, index); |
||
| 233 | }, |
||
| 234 | onTabShow: function (tab, navigation, index) { |
||
| 235 | var total = navigation.find('li').length; |
||
| 236 | var current = index + 1; |
||
| 237 | var $percent = (current / total) * 100; |
||
| 238 | $('#form_wizard_1').find('.progress-bar').css({ |
||
| 239 | width: $percent + '%' |
||
| 240 | }); |
||
| 241 | } |
||
| 242 | }); |
||
| 243 | |||
| 244 | $('#form_wizard_1').find('.button-previous').hide(); |
||
| 245 | $('#form_wizard_1 .button-submit').click(function () { |
||
| 246 | alert('Finished! Hope you like it :)'); |
||
| 247 | }).hide(); |
||
| 248 | |||
| 249 | //apply validation on select2 dropdown value change, this only needed for chosen dropdown integration. |
||
| 250 | $('#country_list', form).change(function () { |
||
| 251 | form.validate().element($(this)); //revalidate the chosen dropdown value and show error or success message for the input |
||
| 252 | }); |
||
| 253 | } |
||
| 254 | |||
| 255 | }; |
||
| 256 | |||
| 257 | }(); |
||
| 258 | |||
| 259 | jQuery(document).ready(function() { |
||
| 260 | FormWizard.init(); |
||
| 261 | }); |