lavkach3

1
//Basic Example
2
$("#example-basic").steps({
3
  headerTag: "h3",
4
  bodyTag: "section",
5
  transitionEffect: "slideLeft",
6
  autoFocus: true,
7
});
8

9
// Basic Example with form
10
var form = $("#example-form");
11
form.validate({
12
  errorPlacement: function errorPlacement(error, element) {
13
    element.before(error);
14
  },
15
  rules: {
16
    confirm: {
17
      equalTo: "#password",
18
    },
19
  },
20
});
21
form.children("div").steps({
22
  headerTag: "h3",
23
  bodyTag: "section",
24
  transitionEffect: "slideLeft",
25
  onStepChanging: function (event, currentIndex, newIndex) {
26
    form.validate().settings.ignore = ":disabled,:hidden";
27
    return form.valid();
28
  },
29
  onFinishing: function (event, currentIndex) {
30
    form.validate().settings.ignore = ":disabled";
31
    return form.valid();
32
  },
33
  onFinished: function (event, currentIndex) {
34
    alert("Submitted!");
35
  },
36
});
37

38
// Advance Example
39

40
var advanced_form = $("#example-advanced-form").show();
41

42
advanced_form
43
  .steps({
44
    headerTag: "h3",
45
    bodyTag: "fieldset",
46
    transitionEffect: "slideLeft",
47
    onStepChanging: function (event, currentIndex, newIndex) {
48
      // Allways allow previous action even if the current form is not valid!
49
      if (currentIndex > newIndex) {
50
        return true;
51
      }
52
      // Forbid next action on "Warning" step if the user is to young
53
      if (newIndex === 3 && Number($("#age-2").val()) < 18) {
54
        return false;
55
      }
56
      // Needed in some cases if the user went back (clean up)
57
      if (currentIndex < newIndex) {
58
        // To remove error styles
59
        advanced_form.find(".body:eq(" + newIndex + ") label.error").remove();
60
        advanced_form.find(".body:eq(" + newIndex + ") .error").removeClass("error");
61
      }
62
      advanced_form.validate().settings.ignore = ":disabled,:hidden";
63
      return advanced_form.valid();
64
    },
65
    onStepChanged: function (event, currentIndex, priorIndex) {
66
      // Used to skip the "Warning" step if the user is old enough.
67
      if (currentIndex === 2 && Number($("#age-2").val()) >= 18) {
68
        advanced_form.steps("next");
69
      }
70
      // Used to skip the "Warning" step if the user is old enough and wants to the previous step.
71
      if (currentIndex === 2 && priorIndex === 3) {
72
        advanced_form.steps("previous");
73
      }
74
    },
75
    onFinishing: function (event, currentIndex) {
76
      advanced_form.validate().settings.ignore = ":disabled";
77
      return advanced_form.valid();
78
    },
79
    onFinished: function (event, currentIndex) {
80
      alert("Submitted!");
81
    },
82
  })
83
  .validate({
84
    errorPlacement: function errorPlacement(error, element) {
85
      element.before(error);
86
    },
87
    rules: {
88
      confirm: {
89
        equalTo: "#password-2",
90
      },
91
    },
92
  });
93

94
// Dynamic Manipulation
95
$("#example-manipulation").steps({
96
  headerTag: "h3",
97
  bodyTag: "section",
98
  enableAllSteps: true,
99
  enablePagination: false,
100
});
101

102
//Vertical Steps
103

104
$("#example-vertical").steps({
105
  headerTag: "h3",
106
  bodyTag: "section",
107
  transitionEffect: "slideLeft",
108
  stepsOrientation: "vertical",
109
});
110

111
//Custom design form example
112
$(".tab-wizard").steps({
113
  headerTag: "h6",
114
  bodyTag: "section",
115
  transitionEffect: "fade",
116
  titleTemplate: '<span class="step">#index#</span> #title#',
117
  labels: {
118
    finish: "Submit",
119
  },
120
  onFinished: function (event, currentIndex) {
121
    swal(
122
      "Form Submitted!",
123
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lorem erat eleifend ex semper, lobortis purus sed."
124
    );
125
  },
126
});
127

128
var form = $(".validation-wizard").show();
129

130
$(".validation-wizard").steps({
131
  headerTag: "h6",
132
  bodyTag: "section",
133
  transitionEffect: "fade",
134
  titleTemplate: '<span class="step">#index#</span> #title#',
135
  labels: {
136
    finish: "Submit",
137
  },
138
  onStepChanging: function (event, currentIndex, newIndex) {
139
    return (
140
      currentIndex > newIndex ||
141
      (!(3 === newIndex && Number($("#age-2").val()) < 18) &&
142
        (currentIndex < newIndex &&
143
          (form.find(".body:eq(" + newIndex + ") label.error").remove(),
144
          form.find(".body:eq(" + newIndex + ") .error").removeClass("error")),
145
        (form.validate().settings.ignore = ":disabled,:hidden"),
146
        form.valid()))
147
    );
148
  },
149
  onFinishing: function (event, currentIndex) {
150
    return (form.validate().settings.ignore = ":disabled"), form.valid();
151
  },
152
  onFinished: function (event, currentIndex) {
153
    swal(
154
      "Form Submitted!",
155
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lorem erat eleifend ex semper, lobortis purus sed."
156
    );
157
  },
158
}),
159
  $(".validation-wizard").validate({
160
    ignore: "input[type=hidden]",
161
    errorClass: "text-danger",
162
    successClass: "text-success",
163
    highlight: function (element, errorClass) {
164
      $(element).removeClass(errorClass);
165
    },
166
    unhighlight: function (element, errorClass) {
167
      $(element).removeClass(errorClass);
168
    },
169
    errorPlacement: function (error, element) {
170
      error.insertAfter(element);
171
    },
172
    rules: {
173
      email: {
174
        email: !0,
175
      },
176
    },
177
  });
178