wizard-steps.js 2.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. /*=========================================================================================
  2. File Name: wizard-steps.js
  3. Description: wizard steps page specific js
  4. ----------------------------------------------------------------------------------------
  5. Item name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
  6. Author: PIXINVENT
  7. Author URL: http://www.themeforest.net/user/pixinvent
  8. ==========================================================================================*/
  9. // Wizard tabs with numbers setup
  10. $(".number-tab-steps").steps({
  11. headerTag: "h6",
  12. bodyTag: "fieldset",
  13. transitionEffect: "fade",
  14. titleTemplate: '<span class="step">#index#</span> #title#',
  15. labels: {
  16. finish: 'Submit'
  17. },
  18. onFinished: function (event, currentIndex) {
  19. alert("Form submitted.");
  20. }
  21. });
  22. // Wizard tabs with icons setup
  23. $(".icons-tab-steps").steps({
  24. headerTag: "h6",
  25. bodyTag: "fieldset",
  26. transitionEffect: "fade",
  27. titleTemplate: '<span class="step">#index#</span> #title#',
  28. labels: {
  29. finish: 'Submit'
  30. },
  31. onFinished: function (event, currentIndex) {
  32. alert("Form submitted.");
  33. }
  34. });
  35. // Validate steps wizard
  36. // Show form
  37. var form = $(".steps-validation").show();
  38. $(".steps-validation").steps({
  39. headerTag: "h6",
  40. bodyTag: "fieldset",
  41. transitionEffect: "fade",
  42. titleTemplate: '<span class="step">#index#</span> #title#',
  43. labels: {
  44. finish: 'Submit'
  45. },
  46. onStepChanging: function (event, currentIndex, newIndex) {
  47. // Allways allow previous action even if the current form is not valid!
  48. if (currentIndex > newIndex) {
  49. return true;
  50. }
  51. // Needed in some cases if the user went back (clean up)
  52. if (currentIndex < newIndex) {
  53. // To remove error styles
  54. form.find(".body:eq(" + newIndex + ") label.error").remove();
  55. form.find(".body:eq(" + newIndex + ") .error").removeClass("error");
  56. }
  57. form.validate().settings.ignore = ":disabled,:hidden";
  58. return form.valid();
  59. },
  60. onFinishing: function (event, currentIndex) {
  61. form.validate().settings.ignore = ":disabled";
  62. return form.valid();
  63. },
  64. onFinished: function (event, currentIndex) {
  65. alert("Submitted!");
  66. }
  67. });
  68. // Initialize validation
  69. $(".steps-validation").validate({
  70. ignore: 'input[type=hidden]', // ignore hidden fields
  71. errorClass: 'danger',
  72. successClass: 'success',
  73. highlight: function (element, errorClass) {
  74. $(element).removeClass(errorClass);
  75. },
  76. unhighlight: function (element, errorClass) {
  77. $(element).removeClass(errorClass);
  78. },
  79. errorPlacement: function (error, element) {
  80. error.insertAfter(element);
  81. },
  82. rules: {
  83. email: {
  84. email: true
  85. }
  86. }
  87. });