Skip to content

Commit 7f0bfec

Browse files
kirbs-kirbs-
committed
Added data-validation-group data-validation-count data attributes.
Updated validateOnBlur to handle new data attributes validations.
1 parent ed50397 commit 7f0bfec

File tree

1 file changed

+173
-75
lines changed

1 file changed

+173
-75
lines changed

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

Lines changed: 173 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -100,83 +100,64 @@
100100
* @return {jQuery}
101101
*/
102102
$.fn.validateInputOnBlur = function(language, config, attachKeyupEvent, eventContext) {
103-
if(attachKeyupEvent === undefined)
104-
attachKeyupEvent = true;
105-
if(!eventContext)
106-
eventContext = 'blur';
107-
108-
language = $.extend($.formUtils.LANG, language || {});
109-
config = $.extend($.formUtils.defaultConfig(), config || {});
110-
config.errorMessagePosition = 'element';
111-
112-
var $element = this,
113-
114-
// test if there is custom obj to hold element error msg (id = element name + err_msg)
115-
elementErrMsgObj = document.getElementById($element.attr('name')+'_err_msg'),
116-
117-
$form = $element.closest("form"),
118-
119-
validationRule = $element.attr(config.validationRuleAttribute);
120-
121-
// Remove possible error style applied by previous validation
122-
$element
123-
.removeClass(config.errorElementClass)
124-
.css('border-color', '')
125-
.parent()
126-
.find('.'+config.errorMessageClass).remove();
127-
128-
// Twitter bs
129-
$form.find('.has-error').removeClass('has-error');
130-
$element.removeClass('valid').parent().removeClass('has-success');
131-
132-
// if element has custom err msg container, clear it
133-
if( elementErrMsgObj != null) {
134-
elementErrMsgObj.innerHTML = '';
135-
}
136-
137-
var validation = $.formUtils.validateInput($element, language, config, $form, eventContext);
138-
139-
if(validation === true) {
140-
$element
141-
.addClass('valid')
142-
.parent()
143-
.addClass('has-success'); // twitter bs
144-
} else if(validation === null) {
145-
$element
146-
.removeClass('valid')
147-
.parent()
148-
.removeClass('has-error')
149-
.removeClass('has-success');
150-
} else {
151-
$element
152-
.addClass(config.errorElementClass)
153-
.removeClass('valid')
154-
.parent()
155-
.addClass('has-error')
156-
.removeClass('has-success'); // twitter bs
157-
158-
// if element has custom err msg container, use it
159-
if( elementErrMsgObj != null) {
160-
elementErrMsgObj.innerHTML = validation;
161-
} else { // use regular span append
162-
var $parent = $element.parent();
163-
$parent.append('<span class="'+config.errorMessageClass+' help-block">'+validation+'</span>');
164-
$parent.addClass('has-error'); // twitter bs
165-
}
166-
167-
if(config.borderColorOnError !== '') {
168-
$element.css('border-color', config.borderColorOnError);
169-
}
170-
171-
if(attachKeyupEvent) {
172-
$element.bind('keyup', function() {
173-
$(this).validateInputOnBlur(language, config, false, 'keyup');
174-
});
175-
}
176-
}
177-
103+
if (attachKeyupEvent === undefined) attachKeyupEvent = true;
104+
if (!eventContext) eventContext = "blur";
105+
language = $.extend($.formUtils.LANG, language || {});
106+
config = $.extend($.formUtils.defaultConfig(), config || {});
107+
config.errorMessagePosition = "element";
108+
109+
110+
var element = this,
111+
groupName = element.data("validation-group"),
112+
$elements = [element],
113+
$form = element.closest("form"),
114+
requiredCnt = element.data("data-validation-count") || 1, //default to 1
115+
validCnt = 0,
116+
validation = null,
117+
validationResults = [];
118+
119+
//overwrite $element inputs if data-validation-group is present.
120+
if(groupName !== undefined){
121+
$elements = element.find("input[data-validation-group='" + groupName + "']");
122+
}
123+
124+
///clear css classes from all elements.
125+
$.formUtils.clearAllStatuses($elements, $form, config);
126+
127+
//validate each element and keep track of results.
128+
for(var i=0; i<$elements.length; i++){
129+
validation = $.formUtils.validateInput($($elements[i]), language, config, $form, eventContext);
130+
if(validation === true) {
131+
validCnt++;
132+
} else {
133+
validationResults[i] = validation;
134+
}
135+
}
136+
137+
//if data-validation-group is present, then also check if all elements in array are blank.
138+
if($.isBlank($elements) && groupName != null) {
139+
validation = "Enter at least " + requiredCnt + " field from " + groupName + ".";
140+
} else { //otherwise check if valid element count >= required count, if not pass error messages.
141+
validation = validCnt >= requiredCnt ? true : validationResults;
142+
}
143+
144+
//apply css classes to all elements in array.
145+
$.formUtils.applyAllStatuses($elements, validation, config, language, attachKeyupEvent);
178146
return this;
179147
};
148+
149+
/**
150+
* Loops through array of input elements and return true if none have a value.
151+
*
152+
* @param {Array} elements
153+
* @return boolean
154+
*/
155+
$.isBlank = function(elements) {
156+
for(var i=0; i<elements.length; i++){
157+
if($(elements[i]).val() !== "") return false
158+
}
159+
return true
160+
};
180161

181162
/**
182163
* Short hand for fetching/adding/removing element attributes
@@ -1176,6 +1157,123 @@
11761157
groupCheckedTooFewStart : 'Please choose at least ',
11771158
groupCheckedTooManyStart : 'Please choose a maximum of ',
11781159
groupCheckedEnd : ' item(s)'
1160+
},
1161+
1162+
/**
1163+
* Helper method to add error classes to input/span.
1164+
*
1165+
* @param $element
1166+
* @param config
1167+
* @param validation
1168+
*/
1169+
showError: function ($element, config, validation){
1170+
var elementErrMsgObj = document.getElementById($element.attr("name") + "_err_msg");
1171+
if( elementErrMsgObj != null) {
1172+
elementErrMsgObj.innerHTML = '';
1173+
}
1174+
1175+
$element
1176+
.addClass(config.errorElementClass)
1177+
.removeClass("valid")
1178+
.parent()
1179+
.addClass("has-error")
1180+
.removeClass("has-success");
1181+
1182+
if (elementErrMsgObj != null) {
1183+
elementErrMsgObj.innerHTML = validation
1184+
} else {
1185+
var $parent = $element.parent();
1186+
$parent.append('<span class="' + config.errorMessageClass + ' help-block">' + validation + "</span>");
1187+
$parent.addClass("has-error")
1188+
}
1189+
if (config.borderColorOnError !== "") {
1190+
$element.css("border-color", config.borderColorOnError)
1191+
}
1192+
},
1193+
1194+
/**
1195+
* Helper method to remove all error/success classes on a given array of elements.
1196+
*
1197+
* @param $element
1198+
* @param $form
1199+
* @param config
1200+
*/
1201+
clearAllStatuses: function ($elements, $form, config){
1202+
for(var i=0; i<$elements.length; i++){
1203+
$.formUtils.clearStatus($($elements[i]), $form, config)
1204+
}
1205+
},
1206+
1207+
/**
1208+
* Helper method to remove error/success classes from a given element.
1209+
*
1210+
* @param $element
1211+
* @param $form
1212+
* @param config
1213+
*/
1214+
clearStatus: function ($element, $form, config){
1215+
$element
1216+
.removeClass(config.errorElementClass)
1217+
.css("border-color", "")
1218+
.parent().find("." + config.errorMessageClass)
1219+
.remove();
1220+
$form.find(".has-error")
1221+
.removeClass("has-error");
1222+
$element
1223+
.removeClass("valid")
1224+
.parent()
1225+
.removeClass("has-success")
1226+
},
1227+
1228+
/**
1229+
* Helper method to apply all status classes on a given array of elements.
1230+
*
1231+
* @param $element
1232+
* @param {String} validation
1233+
* @param config
1234+
* @param language
1235+
*/
1236+
applyAllStatuses: function ($elements, validation, config, language){
1237+
for(var i=0; i<$elements.length; i++){
1238+
if (validation instanceof Array){
1239+
$.formUtils.applyStatus($($elements[i]), validation[i], config, language)
1240+
} else {
1241+
$.formUtils.applyStatus($($elements[i]), validation, config, language)
1242+
}
1243+
1244+
}
1245+
},
1246+
1247+
/**
1248+
* Helper method to apply all error/success status classes on a given element.
1249+
*
1250+
* @param $element
1251+
* @param {String} validation
1252+
* @param config
1253+
* @param language
1254+
* @param attachKeyupEvent
1255+
*/
1256+
applyStatus: function ($element, validation, config, language, attachKeyupEvent){
1257+
if (validation === true) {
1258+
$element
1259+
.addClass("valid")
1260+
.parent()
1261+
.addClass("has-success")
1262+
} else if (validation === null) {
1263+
$element
1264+
.removeClass("valid")
1265+
.parent()
1266+
.removeClass("has-error")
1267+
.removeClass("has-success")
1268+
} else {
1269+
$.formUtils.showError($element, config, validation);
1270+
1271+
if (attachKeyupEvent) {
1272+
$element.bind("keyup", function () {
1273+
$(this).validateInputOnBlur(language, config, false, "keyup")
1274+
})
1275+
}
1276+
}
11791277
}
11801278
};
11811279

0 commit comments

Comments
 (0)