Skip to content

Commit b8429f0

Browse files
kirbs-kirbs-
committed
Updated validateForm to properly handle data-validation-groups.
1 parent 7f0bfec commit b8429f0

File tree

1 file changed

+146
-103
lines changed

1 file changed

+146
-103
lines changed

‎form-validator/jquery.form-validator.js

Lines changed: 146 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@
118118

119119
//overwrite $element inputs if data-validation-group is present.
120120
if(groupName !== undefined){
121-
$elements = element.find("input[data-validation-group='" + groupName + "']");
121+
$elements = element.find("[data-validation-group='" + groupName + "']");
122122
}
123123

124124
///clear css classes from all elements.
@@ -187,38 +187,40 @@
187187
*/
188188
$.fn.validateForm = function(language, config) {
189189

190-
language = $.extend($.formUtils.LANG, language || {});
190+
language = $.extend($.formUtils.LANG, language || {});
191191
config = $.extend($.formUtils.defaultConfig(), config || {});
192192

193193
$.formUtils.isValidatingEntireForm = true;
194194
$.formUtils.haltValidation = false;
195-
196-
/**
197-
* Adds message to error message stack if not already in the message stack
198-
*
199-
* @param {String} mess
200-
* @para {jQuery} $element
201-
*/
202-
var addErrorMessage = function(mess, $element) {
203-
// validate server side will return null as error message before the server is requested
204-
if(mess !== null) {
205-
if ($.inArray(mess, errorMessages) < 0) {
206-
errorMessages.push(mess);
207-
}
208-
errorInputs.push($element);
209-
$element
210-
.valAttr('current-error', mess)
211-
.removeClass('valid')
212-
.parent()
213-
.removeClass('has-success');
214-
}
215-
},
216-
217-
/** Error messages for this validation */
218-
errorMessages = [],
219-
220-
/** Input elements which value was not valid */
221-
errorInputs = [],
195+
196+
var hasErrors = false,
197+
198+
// /**
199+
// * Adds message to error message stack if not already in the message stack
200+
// *
201+
// * @param {String} mess
202+
// * @para {jQuery} $element
203+
// */
204+
// var addErrorMessage = function(mess, $element) {
205+
// // validate server side will return null as error message before the server is requested
206+
// if(mess !== null) {
207+
// if ($.inArray(mess, errorMessages) < 0) {
208+
// errorMessages.push(mess);
209+
// }
210+
// errorInputs.push($element);
211+
// $element
212+
// .valAttr('current-error', mess)
213+
// .removeClass('valid')
214+
// .parent()
215+
// .removeClass('has-success');
216+
// }
217+
// },
218+
//
219+
// /** Error messages for this validation */
220+
// errorMessages = [],
221+
//
222+
// /** Input elements which value was not valid */
223+
// errorInputs = [],
222224

223225
/** Form instance */
224226
$form = this,
@@ -240,45 +242,86 @@
240242
//
241243
// Validate element values
242244
//
243-
$form.find('input,textarea,select').filter(':not([type="submit"],[type="button"])').each(function() {
244-
var $element = $(this);
245+
$form.find('input,textarea,select').filter(':not([type="submit"],[type="button"],[type="hidden"])').each(function() {
246+
247+
var $element = $(this);
245248
var elementType = $element.attr('type');
246-
if (!ignoreInput($element.attr('name'), elementType)) {
247-
248-
var validation = $.formUtils.validateInput(
249-
$element,
250-
language,
251-
config,
252-
$form,
253-
'submit'
254-
);
255-
256-
if(validation !== true) {
257-
addErrorMessage(validation, $element);
258-
} else {
259-
$element
260-
.valAttr('current-error', false)
261-
.addClass('valid')
262-
.parent()
263-
.addClass('has-success');
264-
}
265-
}
249+
250+
var element = this,
251+
groupName = $element.data("validation-group"),
252+
$elements = $([element]),
253+
$form = $element.closest("form"),
254+
requiredCnt = $element.data("data-validation-count") || 1,
255+
validCnt = 0,
256+
validation = null,
257+
validationResults = [];
258+
259+
//load all group elements if data-validation-group is present
260+
if(groupName !== undefined){
261+
$elements = $($form.find("input[data-validation-group='" + groupName + "']"));
262+
}
263+
264+
//don't process if element was already processed by validation group logic.
265+
if ($elements.index($element) != 0){
266+
return true;
267+
}
268+
269+
$.formUtils.clearAllStatuses($elements, $form, config);
270+
271+
for(var i=0; i<$elements.length; i++){
272+
if (!ignoreInput($($elements[i]).attr('name'), elementType)) {
273+
274+
var validation = $.formUtils.validateInput(
275+
$($elements[i]),
276+
language,
277+
config,
278+
$form,
279+
'submit'
280+
);
281+
if(validation === true) {
282+
validCnt++;
283+
} else if (validation != null) {
284+
validationResults[i] = validation;
285+
}
286+
}
287+
}
288+
289+
if($.isBlank($elements) && groupName != null) {
290+
validation = "Enter at least " + requiredCnt + " field from " + groupName + ".";
291+
} else if (validCnt >= requiredCnt){
292+
validation = true;
293+
} else if (validation !== undefined && validation !== null){
294+
validation = validationResults;
295+
hasErrors = true;
296+
}
297+
298+
$.formUtils.applyAllStatuses($elements, validation, config, language, 'submit');
299+
// if(validation !== true) {
300+
// addErrorMessage(validation, $element);
301+
// } else {
302+
// $element
303+
// .valAttr('current-error', false)
304+
// .addClass('valid')
305+
// .parent()
306+
// .addClass('has-success');
307+
// }
308+
266309

267310
});
268311

269312
//
270313
// Reset style and remove error class
271314
//
272-
$form.find('.has-error').removeClass('has-error');
273-
$form.find('input,textarea,select')
274-
.css('border-color', '')
275-
.removeClass(config.errorElementClass);
315+
// $form.find('.has-error').removeClass('has-error');
316+
// $form.find('input,textarea,select')
317+
// .css('border-color', '')
318+
// .removeClass(config.errorElementClass);
276319

277320
//
278321
// Remove possible error messages from last validation
279322
//
280-
$('.' + $.split(config.errorMessageClass, ' ').join('.')).remove();
281-
$('.'+config.errorMessageClass).remove();
323+
// $('.' + $.split(config.errorMessageClass, ' ').join('.')).remove();
324+
// $('.'+config.errorMessageClass).remove();
282325

283326
//
284327
// Run validation callback
@@ -293,55 +336,55 @@
293336
//
294337
// Validation failed
295338
//
296-
if (!$.formUtils.haltValidation && errorInputs.length > 0) {
297-
298-
// Reset form validation flag
299-
$.formUtils.isValidatingEntireForm = false;
300-
301-
// Apply error style to invalid inputs
302-
$.each(errorInputs, function(i, $input) {
303-
if (config.borderColorOnError !== '') {
304-
$input.css('border-color', config.borderColorOnError);
305-
}
306-
$input
307-
.addClass(config.errorElementClass)
308-
.parent()
309-
.addClass('has-error');
310-
});
311-
312-
// display all error messages in top of form
313-
if (config.errorMessagePosition === 'top') {
314-
var messages = '<strong>' + language.errorTitle + '</strong>';
315-
$.each(errorMessages, function(i, mess) {
316-
messages += '<br />* ' + mess;
317-
});
318-
319-
// using div instead of P gives better control of css display properties
320-
$form.children().eq(0).before('<div class="' + config.errorMessageClass + ' alert alert-danger">' + messages + '</div>');
321-
if(config.scrollToTopOnError) {
322-
$(window).scrollTop($form.offset().top - 20);
323-
}
324-
}
325-
326-
// Display error message below input field
327-
else {
328-
$.each(errorInputs, function(i, $input) {
329-
var $parent = $input.parent(),
330-
$errorSpan = $parent.find('span[class='+config.errorMessageClass+']');
331-
if ($errorSpan.length > 0) {
332-
$errorSpan.text(', '+$input.valAttr('current-error'));
333-
} else {
334-
$parent.append('<span class="'+config.errorMessageClass+' help-block">' + $input.valAttr('current-error') + '</span>');
335-
}
336-
});
337-
}
338-
return false;
339-
}
339+
// if (!$.formUtils.haltValidation && errorInputs.length > 0) {
340+
//
341+
// // Reset form validation flag
342+
// $.formUtils.isValidatingEntireForm = false;
343+
//
344+
// // Apply error style to invalid inputs
345+
// $.each(errorInputs, function(i, $input) {
346+
// if (config.borderColorOnError !== '') {
347+
// $input.css('border-color', config.borderColorOnError);
348+
// }
349+
// $input
350+
// .addClass(config.errorElementClass)
351+
// .parent()
352+
// .addClass('has-error');
353+
// });
354+
//
355+
// // display all error messages in top of form
356+
// if (config.errorMessagePosition === 'top') {
357+
// var messages = '<strong>' + language.errorTitle + '</strong>';
358+
// $.each(errorMessages, function(i, mess) {
359+
// messages += '<br />* ' + mess;
360+
// });
361+
//
362+
// // using div instead of P gives better control of css display properties
363+
// $form.children().eq(0).before('<div class="' + config.errorMessageClass + ' alert alert-danger">' + messages + '</div>');
364+
// if(config.scrollToTopOnError) {
365+
// $(window).scrollTop($form.offset().top - 20);
366+
// }
367+
// }
368+
//
369+
// // Display error message below input field
370+
// else {
371+
// $.each(errorInputs, function(i, $input) {
372+
// var $parent = $input.parent(),
373+
// $errorSpan = $parent.find('span[class='+config.errorMessageClass+']');
374+
// if ($errorSpan.length > 0) {
375+
// $errorSpan.text(', '+$input.valAttr('current-error'));
376+
// } else {
377+
// $parent.append('<span class="'+config.errorMessageClass+' help-block">' + $input.valAttr('current-error') + '</span>');
378+
// }
379+
// });
380+
// }
381+
// return false;
382+
// }
340383

341384
// Reset form validation flag
342385
$.formUtils.isValidatingEntireForm = false;
343-
344-
return !$.formUtils.haltValidation;
386+
387+
return !hasErrors;
345388
};
346389

347390
/**

0 commit comments

Comments
 (0)