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