Skip to content

Commit d36ca61

Browse files
lvmajorlvmajor
authored
Remove only :hidden selector from validator ignore settings
This change is made to avoid removing custom selectors defined by developers for the validator.settings.ignore setting of jquery validate plugin. Changes other than "beautifier" related are mainly found in form.validateViews function
1 parent 139a13e commit d36ca61

File tree

1 file changed

+64
-55
lines changed

1 file changed

+64
-55
lines changed

‎src/multi-step-form.js

Lines changed: 64 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
1-
(function (factory) {
1+
(function(factory) {
22
'use strict';
33
if (typeof define === 'function' && define.amd) {
44
// AMD is used - Register as an anonymous module.
55
define(['jquery', 'jquery-validation'], factory);
6-
} else if (typeof exports === 'object') {
6+
}
7+
else if (typeof exports === 'object') {
78
factory(require('jquery'), require('jquery-validation'));
8-
} else {
9+
}
10+
else {
911
// Neither AMD nor CommonJS used. Use global variables.
1012
if (typeof jQuery === 'undefined') {
1113
throw 'multi-step-form-js requires jQuery to be loaded first';
@@ -15,7 +17,7 @@
1517
}
1618
factory(jQuery);
1719
}
18-
}(function ($) {
20+
}(function($) {
1921
'use strict';
2022

2123
const msfCssClasses = {
@@ -48,7 +50,7 @@
4850
viewChanged: "msf:viewChanged"
4951
};
5052

51-
$.fn.multiStepForm = function (options) {
53+
$.fn.multiStepForm = function(options) {
5254
var form = this;
5355

5456
var defaults = {
@@ -80,11 +82,13 @@
8082
form.steps = [];
8183
//form.completedSteps = 0;
8284

83-
form.getActiveView = function () {
84-
return form.views.filter(function () { return this.style && this.style.display !== '' && this.style.display !== 'none' });
85+
form.getActiveView = function() {
86+
return form.views.filter(function() {
87+
return this.style && this.style.display !== '' && this.style.display !== 'none'
88+
});
8589
};
8690

87-
form.setActiveView = function (index) {
91+
form.setActiveView = function(index) {
8892
var previousView = form.getActiveView()[0];
8993
var previousIndex = form.views.index(previousView);
9094

@@ -97,7 +101,7 @@
97101
view.find(':input').first().focus();
98102

99103
var completedSteps = 0;
100-
$.each(form.views, function (index, view) {
104+
$.each(form.views, function(index, view) {
101105
if ($.data(view, msfJqueryData.validated)) {
102106
completedSteps++;
103107
}
@@ -112,39 +116,39 @@
112116
});
113117
}
114118

115-
form.setStatusCssClass = function (step, cssClass) {
119+
form.setStatusCssClass = function(step, cssClass) {
116120
$(step).removeClass(msfCssClasses.statuses.stepComplete);
117121
$(step).removeClass(msfCssClasses.statuses.stepIncomplete);
118122

119123
$(step).addClass(cssClass);
120124
}
121125

122-
form.tryNavigateToView= function(currentIndex, targetIndex) {
126+
form.tryNavigateToView = function(currentIndex, targetIndex) {
123127
if (targetIndex <= currentIndex) {
124128
form.views[currentIndex]
125129
form.validateView(form.views[currentIndex]);
126130
form.setActiveView(targetIndex);
127131
return;
128132
}
129133

130-
if (!form.validateViews(currentIndex, targetIndex - currentIndex, function (i) {
131-
if (!settings.allowUnvalidatedStep) {
132-
form.setActiveView(i);
133-
return false;
134-
}
134+
if (!form.validateViews(currentIndex, targetIndex - currentIndex, function(i) {
135+
if (!settings.allowUnvalidatedStep) {
136+
form.setActiveView(i);
137+
return false;
138+
}
135139

136-
return true;
137-
})) {
140+
return true;
141+
})) {
138142
if (!settings.allowUnvalidatedStep) {
139143
return;
140144
}
141145
}
142146
form.setActiveView(targetIndex);
143147
}
144148

145-
form.init = function () {
149+
form.init = function() {
146150

147-
this.initHeader = function () {
151+
this.initHeader = function() {
148152
if (form.header.length === 0) {
149153
form.header = $("<div/>", {
150154
"class": msfCssClasses.header,
@@ -156,7 +160,7 @@
156160

157161
form.steps = $(form.header).find("." + msfCssClasses.step);
158162

159-
this.initStep = function (index, view) {
163+
this.initStep = function(index, view) {
160164

161165
//append steps to header if they do not exist
162166
if (form.steps.length < index + 1) {
@@ -168,15 +172,14 @@
168172

169173
if (settings.allowClickNavigation) {
170174
//bind the click event to the header step
171-
$(form.steps[index]).click(function (e) {
175+
$(form.steps[index]).click(function(e) {
172176
var view = form.getActiveView()[0];
173177
var currentIndex = form.views.index(view);
174178
var targetIndex = form.steps.index($(e.target).closest("." + msfCssClasses.step)[0]);
175179

176-
form.tryNavigateToView(currentIndex,targetIndex);
180+
form.tryNavigateToView(currentIndex, targetIndex);
177181
});
178182
}
179-
180183
}
181184

182185
$.each(form.views, this.initStep);
@@ -185,7 +188,7 @@
185188
};
186189

187190

188-
this.initNavigation = function () {
191+
this.initNavigation = function() {
189192

190193
if (form.navigation.length === 0) {
191194
form.navigation = $("<div/>", {
@@ -195,8 +198,9 @@
195198
$(form.content).after(form.navigation);
196199
}
197200

198-
this.initNavButton = function (type) {
199-
var element = this.navigation.find("button[data-type='" + type + "'], input[type='button']"), type;
201+
this.initNavButton = function(type) {
202+
var element = this.navigation.find("button[data-type='" + type + "'], input[type='button']"),
203+
type;
200204
if (element.length === 0) {
201205
element = $("<button/>", {
202206
"class": msfCssClasses.navButton,
@@ -205,7 +209,6 @@
205209
});
206210
element.appendTo(form.navigation);
207211
}
208-
209212
return element;
210213
};
211214

@@ -214,31 +217,30 @@
214217
form.submitNavButton = this.initNavButton(msfNavTypes.submit);
215218
};
216219

217-
218220
this.initHeader();
219221
this.initNavigation();
220222

221-
this.views.each(function (index, view) {
223+
this.views.each(function(index, view) {
222224

223225
$.data(view, msfJqueryData.validated, false);
224226
$.data(view, msfJqueryData.visited, false);
225227

226228
//if this is not the last view do not allow the enter key to submit the form as it is not completed yet
227-
if (index != form.views.length - 1) {
228-
$(view).find(':input').not('textarea').keypress(function (e) {
229-
if (e.which == 13) // Enter key = keycode 13
229+
if (index !== form.views.length - 1) {
230+
$(view).find(':input').not('textarea').keypress(function(e) {
231+
if (e.which === 13) // Enter key = keycode 13
230232
{
231233
form.nextNavButton.click();
232234
return false;
233235
}
234236
});
235237
}
236238

237-
$(view).on('show', function (e) {
239+
$(view).on('show', function(e) {
238240
if (this !== e.target)
239241
return;
240242

241-
var view = e.target
243+
var view = e.target;
242244
$.data(view, msfJqueryData.visited, true);
243245

244246
var index = form.views.index(view);
@@ -262,7 +264,7 @@
262264
}
263265
});
264266

265-
$(view).on('hide', function (e) {
267+
$(view).on('hide', function(e) {
266268
if (this !== e.target)
267269
return;
268270

@@ -292,20 +294,20 @@
292294
});
293295

294296

295-
if(settings.activeIndex > 0) {
296-
$(form).ready(function(){
297+
if (settings.activeIndex > 0) {
298+
$(form).ready(function() {
297299
form.tryNavigateToView(0, settings.activeIndex);
298300
});
299-
300301
}
301302
else {
302303
form.setActiveView(0);
303304
}
304305

305306
};
306307

307-
form.validateView = function (view) {
308+
form.validateView = function(view) {
308309
var index = form.views.index(view);
310+
309311
if (form.validate().subset(view)) {
310312
$.data(view, msfJqueryData.validated, true);
311313
form.setStatusCssClass(form.steps[index], msfCssClasses.statuses.stepComplete);
@@ -318,25 +320,33 @@
318320
}
319321
};
320322

321-
form.validateViews = function (i, length, invalid) {
323+
form.validateViews = function(i, length, invalid) {
322324
i = typeof i === 'undefined' ? 0 : i;
323325
length = typeof length === 'undefined' ? form.views.length : length;
324-
325326

326-
var validationIgnore = "";
327+
328+
var validationIgnore = ""; // Saving the existing validator ignore settings to reset them after validating multi-step form
327329
var isValid = true;
328330

329331
//remember original validation setings for ignores
330332
if ($(form).data("validator")) {
331-
validationIgnore = $(form).data("validator").settings.ignore
332-
$(form).data("validator").settings.ignore = "";
333+
var formValidatorSettings = $(form).data("validator").settings;
334+
validationIgnore = formValidatorSettings.ignore;
335+
336+
var currentValidationIgnoreSettingsArray = validationIgnore.split(",");
337+
if (currentValidationIgnoreSettingsArray.length >= 1) {
338+
// Remove the ":hidden" selector from validator ignore settings as we want our hidden fieldsets/steps to be validated before final submit
339+
var hiddenIndex = $.inArray(":hidden", currentValidationIgnoreSettingsArray);
340+
currentValidationIgnoreSettingsArray.splice(hiddenIndex, 1);
341+
$(form).data("validator").settings.ignore = currentValidationIgnoreSettingsArray.toString();
342+
}
333343
}
334344

335345
for (i; i < length; i++) {
336346
if (!form.validateView(form.views[i])) {
337347
isValid = false;
338348

339-
if(!invalid(i)) {
349+
if (!invalid(i)) {
340350
break;
341351
}
342352
}
@@ -351,7 +361,7 @@
351361

352362
form.init();
353363

354-
form.nextNavButton.click(function () {
364+
form.nextNavButton.click(function() {
355365
var view = form.getActiveView()[0];
356366
var index = form.views.index(view);
357367

@@ -363,7 +373,7 @@
363373
}
364374
});
365375

366-
form.backNavButton.click(function () {
376+
form.backNavButton.click(function() {
367377
var view = form.getActiveView()[0];
368378
var index = form.views.index(view);
369379

@@ -372,30 +382,29 @@
372382
form.setActiveView(index - 1);
373383
});
374384

375-
form.submit(function (e) {
385+
form.submit(function(e) {
376386
var validationIgnore = "";
377387

378-
form.validateViews(0, form.views.length, function () {
388+
form.validateViews(0, form.views.length, function() {
379389
e.preventDefault();
380390
return true;
381391
});
382392
});
383-
384393
return form;
385394
};
386395

387-
$.validator.prototype.subset = function (container) {
396+
$.validator.prototype.subset = function(container) {
388397
var ok = true;
389398
var self = this;
390-
$(container).find(':input').each(function () {
399+
$(container).find(':input').each(function() {
391400
if (!self.element($(this))) ok = false;
392401
});
393402
return ok;
394403
};
395404

396-
$.each(['show', 'hide'], function (i, ev) {
405+
$.each(['show', 'hide'], function(i, ev) {
397406
var el = $.fn[ev];
398-
$.fn[ev] = function () {
407+
$.fn[ev] = function() {
399408
this.trigger(ev);
400409
return el.apply(this, arguments);
401410
};

0 commit comments

Comments
 (0)