examples.wizard.js 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319
  1. (function( $ ) {
  2. 'use strict';
  3. /*
  4. Wizard #1
  5. */
  6. var $w1finish = $('#w1').find('ul.pager li.finish'),
  7. $w1validator = $("#w1 form").validate({
  8. highlight: function(element) {
  9. $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
  10. },
  11. success: function(element) {
  12. $(element).closest('.form-group').removeClass('has-error');
  13. $(element).remove();
  14. },
  15. errorPlacement: function( error, element ) {
  16. element.parent().append( error );
  17. }
  18. });
  19. $w1finish.on('click', function( ev ) {
  20. ev.preventDefault();
  21. var validated = $('#w1 form').valid();
  22. if ( validated ) {
  23. new PNotify({
  24. title: 'Congratulations',
  25. text: 'You completed the wizard form.',
  26. type: 'custom',
  27. addclass: 'notification-success',
  28. icon: 'fa fa-check'
  29. });
  30. }
  31. });
  32. $('#w1').bootstrapWizard({
  33. tabClass: 'wizard-steps',
  34. nextSelector: 'ul.pager li.next',
  35. previousSelector: 'ul.pager li.previous',
  36. firstSelector: null,
  37. lastSelector: null,
  38. onNext: function( tab, navigation, index, newindex ) {
  39. var validated = $('#w1 form').valid();
  40. if( !validated ) {
  41. $w1validator.focusInvalid();
  42. return false;
  43. }
  44. },
  45. onTabClick: function( tab, navigation, index, newindex ) {
  46. if ( newindex == index + 1 ) {
  47. return this.onNext( tab, navigation, index, newindex);
  48. } else if ( newindex > index + 1 ) {
  49. return false;
  50. } else {
  51. return true;
  52. }
  53. },
  54. onTabChange: function( tab, navigation, index, newindex ) {
  55. var totalTabs = navigation.find('li').size() - 1;
  56. $w1finish[ newindex != totalTabs ? 'addClass' : 'removeClass' ]( 'hidden' );
  57. $('#w1').find(this.nextSelector)[ newindex == totalTabs ? 'addClass' : 'removeClass' ]( 'hidden' );
  58. }
  59. });
  60. /*
  61. Wizard #2
  62. */
  63. var $w2finish = $('#w2').find('ul.pager li.finish'),
  64. $w2validator = $("#w2 form").validate({
  65. highlight: function(element) {
  66. $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
  67. },
  68. success: function(element) {
  69. $(element).closest('.form-group').removeClass('has-error');
  70. $(element).remove();
  71. },
  72. errorPlacement: function( error, element ) {
  73. element.parent().append( error );
  74. }
  75. });
  76. $w2finish.on('click', function( ev ) {
  77. ev.preventDefault();
  78. var validated = $('#w2 form').valid();
  79. if ( validated ) {
  80. new PNotify({
  81. title: 'Congratulations',
  82. text: 'You completed the wizard form.',
  83. type: 'custom',
  84. addclass: 'notification-success',
  85. icon: 'fa fa-check'
  86. });
  87. }
  88. });
  89. $('#w2').bootstrapWizard({
  90. tabClass: 'wizard-steps',
  91. nextSelector: 'ul.pager li.next',
  92. previousSelector: 'ul.pager li.previous',
  93. firstSelector: null,
  94. lastSelector: null,
  95. onNext: function( tab, navigation, index, newindex ) {
  96. var validated = $('#w2 form').valid();
  97. if( !validated ) {
  98. $w2validator.focusInvalid();
  99. return false;
  100. }
  101. },
  102. onTabClick: function( tab, navigation, index, newindex ) {
  103. if ( newindex == index + 1 ) {
  104. return this.onNext( tab, navigation, index, newindex);
  105. } else if ( newindex > index + 1 ) {
  106. return false;
  107. } else {
  108. return true;
  109. }
  110. },
  111. onTabChange: function( tab, navigation, index, newindex ) {
  112. var totalTabs = navigation.find('li').size() - 1;
  113. $w2finish[ newindex != totalTabs ? 'addClass' : 'removeClass' ]( 'hidden' );
  114. $('#w2').find(this.nextSelector)[ newindex == totalTabs ? 'addClass' : 'removeClass' ]( 'hidden' );
  115. }
  116. });
  117. /*
  118. Wizard #3
  119. */
  120. var $w3finish = $('#w3').find('ul.pager li.finish'),
  121. $w3validator = $("#w3 form").validate({
  122. highlight: function(element) {
  123. $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
  124. },
  125. success: function(element) {
  126. $(element).closest('.form-group').removeClass('has-error');
  127. $(element).remove();
  128. },
  129. errorPlacement: function( error, element ) {
  130. element.parent().append( error );
  131. }
  132. });
  133. $w3finish.on('click', function( ev ) {
  134. ev.preventDefault();
  135. var validated = $('#w3 form').valid();
  136. if ( validated ) {
  137. new PNotify({
  138. title: 'Congratulations',
  139. text: 'You completed the wizard form.',
  140. type: 'custom',
  141. addclass: 'notification-success',
  142. icon: 'fa fa-check'
  143. });
  144. }
  145. });
  146. $('#w3').bootstrapWizard({
  147. tabClass: 'wizard-steps',
  148. nextSelector: 'ul.pager li.next',
  149. previousSelector: 'ul.pager li.previous',
  150. firstSelector: null,
  151. lastSelector: null,
  152. onNext: function( tab, navigation, index, newindex ) {
  153. var validated = $('#w3 form').valid();
  154. if( !validated ) {
  155. $w3validator.focusInvalid();
  156. return false;
  157. }
  158. },
  159. onTabClick: function( tab, navigation, index, newindex ) {
  160. if ( newindex == index + 1 ) {
  161. return this.onNext( tab, navigation, index, newindex);
  162. } else if ( newindex > index + 1 ) {
  163. return false;
  164. } else {
  165. return true;
  166. }
  167. },
  168. onTabChange: function( tab, navigation, index, newindex ) {
  169. var $total = navigation.find('li').size() - 1;
  170. $w3finish[ newindex != $total ? 'addClass' : 'removeClass' ]( 'hidden' );
  171. $('#w3').find(this.nextSelector)[ newindex == $total ? 'addClass' : 'removeClass' ]( 'hidden' );
  172. },
  173. onTabShow: function( tab, navigation, index ) {
  174. var $total = navigation.find('li').length - 1;
  175. var $current = index;
  176. var $percent = Math.floor(( $current / $total ) * 100);
  177. $('#w3').find('.progress-indicator').css({ 'width': $percent + '%' });
  178. tab.prevAll().addClass('completed');
  179. tab.nextAll().removeClass('completed');
  180. }
  181. });
  182. /*
  183. Wizard #4
  184. */
  185. var $w4finish = $('#w4').find('ul.pager li.finish'),
  186. $w4validator = $("#w4 form").validate({
  187. highlight: function(element) {
  188. $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
  189. },
  190. success: function(element) {
  191. $(element).closest('.form-group').removeClass('has-error');
  192. $(element).remove();
  193. },
  194. errorPlacement: function( error, element ) {
  195. element.parent().append( error );
  196. }
  197. });
  198. $w4finish.on('click', function( ev ) {
  199. ev.preventDefault();
  200. var validated = $('#w4 form').valid();
  201. if ( validated ) {
  202. new PNotify({
  203. title: 'Congratulations',
  204. text: 'You completed the wizard form.',
  205. type: 'custom',
  206. addclass: 'notification-success',
  207. icon: 'fa fa-check'
  208. });
  209. }
  210. });
  211. $('#w4').bootstrapWizard({
  212. tabClass: 'wizard-steps',
  213. nextSelector: 'ul.pager li.next',
  214. previousSelector: 'ul.pager li.previous',
  215. firstSelector: null,
  216. lastSelector: null,
  217. onNext: function( tab, navigation, index, newindex ) {
  218. var validated = $('#w4 form').valid();
  219. if( !validated ) {
  220. $w4validator.focusInvalid();
  221. return false;
  222. }
  223. },
  224. onTabClick: function( tab, navigation, index, newindex ) {
  225. if ( newindex == index + 1 ) {
  226. return this.onNext( tab, navigation, index, newindex);
  227. } else if ( newindex > index + 1 ) {
  228. return false;
  229. } else {
  230. return true;
  231. }
  232. },
  233. onTabChange: function( tab, navigation, index, newindex ) {
  234. var $total = navigation.find('li').size() - 1;
  235. $w4finish[ newindex != $total ? 'addClass' : 'removeClass' ]( 'hidden' );
  236. $('#w4').find(this.nextSelector)[ newindex == $total ? 'addClass' : 'removeClass' ]( 'hidden' );
  237. },
  238. onTabShow: function( tab, navigation, index ) {
  239. var $total = navigation.find('li').length - 1;
  240. var $current = index;
  241. var $percent = Math.floor(( $current / $total ) * 100);
  242. $('#w4').find('.progress-indicator').css({ 'width': $percent + '%' });
  243. tab.prevAll().addClass('completed');
  244. tab.nextAll().removeClass('completed');
  245. }
  246. });
  247. /*
  248. Wizard #5
  249. */
  250. var $w5finish = $('#w5').find('ul.pager li.finish'),
  251. $w5validator = $("#w5 form").validate({
  252. highlight: function(element) {
  253. $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
  254. },
  255. success: function(element) {
  256. $(element).closest('.form-group').removeClass('has-error');
  257. $(element).remove();
  258. },
  259. errorPlacement: function( error, element ) {
  260. element.parent().append( error );
  261. }
  262. });
  263. $w5finish.on('click', function( ev ) {
  264. ev.preventDefault();
  265. var validated = $('#w5 form').valid();
  266. if ( validated ) {
  267. new PNotify({
  268. title: 'Congratulations',
  269. text: 'You completed the wizard form.',
  270. type: 'custom',
  271. addclass: 'notification-success',
  272. icon: 'fa fa-check'
  273. });
  274. }
  275. });
  276. $('#w5').bootstrapWizard({
  277. tabClass: 'wizard-steps',
  278. nextSelector: 'ul.pager li.next',
  279. previousSelector: 'ul.pager li.previous',
  280. firstSelector: null,
  281. lastSelector: null,
  282. onNext: function( tab, navigation, index, newindex ) {
  283. var validated = $('#w5 form').valid();
  284. if( !validated ) {
  285. $w5validator.focusInvalid();
  286. return false;
  287. }
  288. },
  289. onTabChange: function( tab, navigation, index, newindex ) {
  290. var $total = navigation.find('li').size() - 1;
  291. $w5finish[ newindex != $total ? 'addClass' : 'removeClass' ]( 'hidden' );
  292. $('#w5').find(this.nextSelector)[ newindex == $total ? 'addClass' : 'removeClass' ]( 'hidden' );
  293. },
  294. onTabShow: function( tab, navigation, index ) {
  295. var $total = navigation.find('li').length;
  296. var $current = index + 1;
  297. var $percent = ( $current / $total ) * 100;
  298. $('#w5').find('.progress-bar').css({ 'width': $percent + '%' });
  299. }
  300. });
  301. }).apply( this, [ jQuery ]);