|
49 | 49 | if($help.length == 0) { |
50 | 50 | $help = $('<span />') |
51 | 51 | .addClass(className) |
| 52 | + .addClass('form-help') // for css |
52 | 53 | .text(help) |
53 | 54 | .hide(); |
54 | 55 |
|
|
74 | 75 | * error message in a span element that is appended to the parent |
75 | 76 | * element |
76 | 77 | * |
77 | | - * @param {Object} language Optional, will override $.formUtils.LANG |
78 | | - * @param {Object} settings Optional, will override the default settings |
79 | | - * @param {Boolean} attachKeyupEvent Optional |
| 78 | + * @param {Object} [language] Optional, will override $.formUtils.LANG |
| 79 | + * @param {Object} [config] Optional, will override the default settings |
| 80 | + * @param {Boolean} [attachKeyupEvent] Optional |
80 | 81 | * @return {jQuery} |
81 | 82 | */ |
82 | | - $.fn.doValidate = function(language, settings, attachKeyupEvent) { |
| 83 | + $.fn.doValidate = function(language, config, attachKeyupEvent) { |
83 | 84 | if(typeof attachKeyupEvent == 'undefined') { |
84 | 85 | attachKeyupEvent = true; |
85 | 86 | } |
86 | 87 |
|
87 | 88 | var $element = this; |
| 89 | + |
88 | 90 | // test if there is custom obj to hold element error msg (id = element name + err_msg) |
89 | 91 | var elementErrMsgObj = document.getElementById($element.attr('name')+'_err_msg'); |
90 | 92 |
|
91 | | - var config = { |
92 | | - ignore : [], // Names of inputs not to be validated, overwriting attribute notaed validation |
93 | | - validationRuleAttribute : 'data-validation', |
94 | | - validationErrorMsgAttribute : 'data-validation-error-msg', // define custom err msg inline with element |
95 | | - errorElementClass : 'error', // Class that will be put on elements which value is invalid |
96 | | - borderColorOnError : 'red', |
97 | | - dateFormat : 'yyyy-mm-dd' |
98 | | - }; |
99 | | - |
100 | | - if (settings) { |
101 | | - $.extend(config, settings); |
102 | | - } |
103 | | - if (language) { |
104 | | - $.extend($.formUtils.LANG, language); |
105 | | - } |
106 | | - // get updated dialog strings |
107 | | - language = $.formUtils.LANG; |
| 93 | + language = $.extend(language || {}, $.formUtils.LANG); |
| 94 | + config = $.extend($.formUtils.defaultConfig(), config || {}); |
| 95 | + config.errorMessagePosition = 'element'; |
108 | 96 |
|
109 | 97 | var $form = $element.closest("form"); |
110 | 98 |
|
111 | | - var elementType = $element.attr('type'); |
112 | | - if ($.formUtils.defaultBorderColor === null && elementType !== 'submit' && elementType !== 'checkbox' && elementType !== 'radio') { |
113 | | - $.formUtils.defaultBorderColor = $element.css('border-color'); |
114 | | - } |
| 99 | + $.formUtils.figureOutDefaultBorderColor($element); |
115 | 100 |
|
116 | 101 | var validationRule = $element.attr(config.validationRuleAttribute); |
117 | 102 |
|
|
145 | 130 | validateWhenBlurred($element); |
146 | 131 | } |
147 | 132 |
|
148 | | - var validation = $.formUtils.validateInput($element, language, config, $form); |
| 133 | + var validation = $.formUtils.validateInput($element, language, config); |
149 | 134 |
|
150 | 135 | if(validation === true) { |
151 | 136 | $element.addClass('valid'); |
|
167 | 152 |
|
168 | 153 | if(attachKeyupEvent) { |
169 | 154 | $element.bind('keyup', function() { |
170 | | - $(this).doValidate(language, settings, false); |
| 155 | + $(this).doValidate(language, config, false); |
171 | 156 | }); |
172 | 157 | } |
173 | 158 | } |
|
197 | 182 | /** |
198 | 183 | * Function that validate all inputs in a form |
199 | 184 | * |
200 | | - * @param language |
201 | | - * @param config |
| 185 | + * @param [language] |
| 186 | + * @param [config] |
202 | 187 | */ |
203 | 188 | $.fn.validate = function(language, config) { |
204 | 189 |
|
205 | | - if(!config) |
206 | | - config = {}; |
207 | | - if(!language) |
208 | | - language = {}; |
209 | | - |
210 | | - $.extend(language, $.formUtils.LANG); |
211 | | - $.extend(config, $.formUtils.defaultConfig); |
| 190 | + language = $.extend(language || {}, $.formUtils.LANG); |
| 191 | + config = $.extend($.formUtils.defaultConfig(), config || {}); |
212 | 192 |
|
213 | 193 | /** |
214 | 194 | * Adds message to error message stack if not already in the message stack |
|
241 | 221 | if (type === 'submit' || type === 'button') { |
242 | 222 | return true; |
243 | 223 | } |
244 | | - |
245 | | - for (var i = 0; i < config.ignore.length; i++) { |
246 | | - if (config.ignore[i] === name) { |
247 | | - return true; |
248 | | - } |
249 | | - } |
250 | | - return false; |
| 224 | + return $.inArray(name, config.ignore || []) > -1; |
251 | 225 | }; |
252 | 226 |
|
253 | 227 | // |
|
285 | 259 | else { |
286 | 260 |
|
287 | 261 | // memorize border color |
288 | | - if ($.formUtils.defaultBorderColor === null && $element.attr('type')) { |
289 | | - $.formUtils.defaultBorderColor = $element.css('border-color'); |
290 | | - } |
| 262 | + $.formUtils.figureOutDefaultBorderColor($element); |
291 | 263 |
|
292 | 264 | var valid = $.formUtils.validateInput( |
293 | 265 | $element, |
294 | 266 | language, |
295 | | - config, |
296 | | - $form |
| 267 | + config |
297 | 268 | ); |
298 | 269 |
|
299 | 270 | if(valid !== true) { |
|
389 | 360 | /** |
390 | 361 | * Default config for $(...).validate(); |
391 | 362 | */ |
392 | | - defaultConfig : { |
393 | | - ignore : [], // Names of inputs not to be validated even though node attribute containing the validation rules tells us to |
394 | | - errorElementClass : 'error', // Class that will be put on elements which value is invalid |
395 | | - borderColorOnError : 'red', // Border color of elements which value is invalid, empty string to not change border color |
396 | | - errorMessageClass : 'jquery_form_error_message', // class name of div containing error messages when validation fails |
397 | | - validationRuleAttribute : 'data-validation', // name of the attribute holding the validation rules |
398 | | - validationErrorMsgAttribute : 'data-validation-error-msg', // define custom err msg inline with element |
399 | | - errorMessagePosition : 'top', // Can be either "top" or "element" |
400 | | - scrollToTopOnError : true, |
401 | | - dateFormat : 'yyyy-mm-dd' |
| 363 | + defaultConfig : function() { |
| 364 | + return { |
| 365 | + ignore : [], // Names of inputs not to be validated even though node attribute containing the validation rules tells us to |
| 366 | + errorElementClass : 'error', // Class that will be put on elements which value is invalid |
| 367 | + borderColorOnError : 'red', // Border color of elements which value is invalid, empty string to not change border color |
| 368 | + errorMessageClass : 'jquery_form_error_message', // class name of div containing error messages when validation fails |
| 369 | + validationRuleAttribute : 'data-validation', // name of the attribute holding the validation rules |
| 370 | + validationErrorMsgAttribute : 'data-validation-error-msg', // define custom err msg inline with element |
| 371 | + errorMessagePosition : 'top', // Can be either "top" or "element" |
| 372 | + scrollToTopOnError : true, |
| 373 | + dateFormat : 'yyyy-mm-dd' |
| 374 | + } |
| 375 | + }, |
| 376 | + |
| 377 | + /** |
| 378 | + * @param {jQuery} $element |
| 379 | + */ |
| 380 | + figureOutDefaultBorderColor : function($element) { |
| 381 | + var elementType = $element.attr('type'); |
| 382 | + if (this.defaultBorderColor === null && elementType !== 'submit' && elementType !== 'checkbox' && elementType !== 'radio') { |
| 383 | + this.defaultBorderColor = $element.css('border-color'); |
| 384 | + } |
402 | 385 | }, |
403 | 386 |
|
404 | 387 | /** |
|
531 | 514 | * @param {jQuery} $element |
532 | 515 | * @param {Object} language ($.formUtils.LANG) |
533 | 516 | * @param {Object} config |
534 | | - * @param {jQuery} $form |
535 | 517 | * @return {String|Boolean} |
536 | 518 | */ |
537 | | - validateInput : function($element, language, config, $form) { |
| 519 | + validateInput : function($element, language, config) { |
538 | 520 |
|
539 | 521 | // Multiple select |
540 | 522 | if( $element.get(0).nodeName == 'SELECT' && $element.attr('multiple') ) { |
541 | 523 | return this.validateMultipleSelect($element.val(), $element, config, language); |
542 | 524 | } |
543 | 525 |
|
544 | | - // Form not given as argument |
545 | | - if(!$form) |
546 | | - $form = $element.closest('form'); |
547 | | - |
548 | 526 | var value = $.trim($element.val()); |
549 | 527 | value = value || ''; |
550 | 528 | var optional = $element.valAttr('optional'); |
|
592 | 570 | } |
593 | 571 |
|
594 | 572 | var validator = $.formUtils.validators[posRules[i]]; |
595 | | - console.log(posRules[i]); |
596 | | - console.log(validator); |
597 | 573 |
|
598 | 574 | if( validator && typeof validator['validate'] == 'function' ) { |
599 | 575 |
|
600 | | - var isValid = validator.validate(value, $element, config, language, $form); |
| 576 | + var isValid = validator.validate(value, $element, config, language, $element.closest('form')); |
| 577 | + |
601 | 578 | if(!isValid) { |
602 | 579 | $.formUtils.trigger('invalid', $element); |
603 | 580 | if( !validationErrorMsg ) { |
|
0 commit comments