From a90f8ecb54a3f527a340bdbb312e084615ca3c14 Mon Sep 17 00:00:00 2001 From: Moses Bien Date: Wed, 1 Sep 2021 10:50:15 +0100 Subject: [PATCH] Update: - Added Error count per form: - Form can now be checked if error exists and form submission prevented. --- README.md | 2 +- src/example/index.html | 14 + .../fb-formvalidator/fusion.form.validator.js | 141 +++++---- src/js/fb-formvalidator/init.js | 31 +- src/js/jquery/form.validation.js | 269 ------------------ 5 files changed, 132 insertions(+), 325 deletions(-) delete mode 100644 src/js/jquery/form.validation.js diff --git a/README.md b/README.md index 70d7655..d0b55c6 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ --- ## Installation -[jQuery](https://github.com/jquery/jquery/releases/latest) 3.x, [Bootstrap](https://getbootstrap.com/docs/5.0/getting-started/download/) 5.x, and [Fontawesome]() 6.x are required. +[jQuery](https://github.com/jquery/jquery/releases/latest) 3.x, [Bootstrap](https://getbootstrap.com/docs/5.0/getting-started/download/) 5.x, and [Fontawesome](https://fontawesome.com/v6.0) 6.x are required. No worries, the above requirements are shipped along with the Fusion Form Validator package.\ To get the latest version of Fusion Form Validator, simply head over to [Github](https://github.com/Bien-Glitch/fusion.form.validator/releases/latest) and download the assets. diff --git a/src/example/index.html b/src/example/index.html index b96b5f7..2b46ad1 100644 --- a/src/example/index.html +++ b/src/example/index.html @@ -73,6 +73,20 @@
Don't have an account ?
+ +
+
+
+ +
+ + + +
+
+
+
+
diff --git a/src/js/fb-formvalidator/fusion.form.validator.js b/src/js/fb-formvalidator/fusion.form.validator.js index 9fff743..81452e0 100644 --- a/src/js/fb-formvalidator/fusion.form.validator.js +++ b/src/js/fb-formvalidator/fusion.form.validator.js @@ -3,7 +3,6 @@ * Copyright 2021 Fusion Bolt inc. */ -// TODO: form.validation.js to be deprecated in next version // TODO: Add option for strict validation. (i.e Restrict form submission if there are validation errors) /** @@ -35,19 +34,8 @@ let valid_right, valid: '', } }, - - paddingMultipliers = { - input: '2.5', - input$sm: '3.5', - select: '4', - select$sm: '5.8', - validDate: '3', - validDate$sm: '3.8', - validInput: '0.9', - validInput$sm: '3 / 2', - validSelect: '3', - validSelect$sm: '3.8', - }; + paddingMultipliers = []; + /** * ---------------------------------------------------------- @@ -83,14 +71,31 @@ class Base { constructor(element, form) { this._form = form; this._element = element; - this.#_config = default_validator_config; + this.#_config = { + regExp: { + email: /^\w+([.-]?\w+)*@\w+([.-]?\w{2,3})*(\.\w{2,3})$/gi, + phone: /^(\+\d{1,3}?\s)(\(\d{3}\)\s)?(\d+\s)*(\d{2,3}-?\d+)+$/g, + }, + validation: { + nativeValidation: false, + passwordId: 'password', + passwordConfirmId: 'password_confirmation', + validateEmail: false, + validatePhone: false, + validatePassword: false, + }, + validation_icons: { + invalid: '', + valid: '', + } + }; this.#_invalidWrapper = (icon) => { - return '' + icon + ''; + return `${icon}`; } this.#_validWrapper = (icon) => { - return '' + icon + ''; + return `${icon}`; } } @@ -114,6 +119,7 @@ class Base { return this.#_validWrapper } + /** Setters **/ /* * *Assign the base element* * */ @@ -121,6 +127,7 @@ class Base { this._element = element; } + /** Static **/ /* * *Get current validator version* * */ @@ -148,7 +155,18 @@ class ValidateForm extends Base { let _config = this.config; this.#_regExp = _config.regExp; - this.#_padding = paddingMultipliers; + this.#_padding = { + input: 2.5, + input$sm: 3.5, + select: 4, + select$sm: 5.8, + validDate: 3, + validDate$sm: 3.8, + validInput: 0.9, + validInput$sm: 1.5, + validSelect: 3, + validSelect$sm: 3.8, + }; this.#_validation = _config.validation; this.#_validation_icons = _config.validation_icons; this.#_invalid = this.invalidIcon; @@ -170,23 +188,25 @@ class ValidateForm extends Base { validation = this.#_validation, icons = this.#_validation_icons, invalidWrapper = this.#_invalid, - validWrapper = this.#_valid; - /*padding = this._padding*/ + validWrapper = this.#_valid, + context = `#${form.id} ${this._element}`; + paddingMultipliers[form.id] = this.#_padding; + errorBag[form.id] = {}; + errorCount[form.id] = 0; if (validation.nativeValidation) $(form).removeAttr('novalidate'); else $(form).attr({novalidate: ''}); - - $(this._element).each(function () { + $(context).each(function () { let target = this, element = $('input, textarea, select', target), inputElement = $('input, textarea', target), selectElement = $('select', target), element_id = $(element).attr('id'); - $(target).attr('id', element_id + '_group'); + $(target).attr('id', `${element_id}_group`); $('.input-group', target).append(validWrapper(icons.valid)).append(invalidWrapper(icons.invalid)); inputElement.on({ @@ -198,8 +218,8 @@ class ValidateForm extends Base { inputElement.validate(target); else { if (_type === 'password' && validation.validatePassword) { - let _password_id = '#' + validation.passwordId, - _password_confirm_id = '#' + validation.passwordConfirmId, + let _password_id = `#${validation.passwordId}`, + _password_confirm_id = `#${validation.passwordConfirmId}`, _password = $(_password_id), _password_confirm = $(_password_confirm_id), minlength = _password.attr('minlength'), @@ -209,7 +229,7 @@ class ValidateForm extends Base { if (inputElement.val().length < minlength || inputElement.val().length > maxlength) { if ($(form).has(_password_confirm).length) _password_confirm.validate(_password_confirm.parents(form_group), null, true); - inputElement.validate(target, 'Password must be between ' + minlength + ' and ' + maxlength + ' characters'); + inputElement.validate(target, `Password must be between ${minlength} and ${maxlength} characters`); } else { if ($(form).has(_password_confirm).length) if ((inputElement.val().length > 0 && _password_confirm.val().length > 0) && inputElement.val() !== _password_confirm.val()) { @@ -228,7 +248,7 @@ class ValidateForm extends Base { else { if (_password.val().length < minlength || _password.val().length > maxlength) { inputElement.validate(target, null, true); - _password.validate(_password.parents(form_group), 'Password must be between ' + minlength + ' and ' + maxlength + ' characters'); + _password.validate(_password.parents(form_group), `Password must be between ${minlength} and ${maxlength} characters'`); } else if (inputElement.val().length < 1) inputElement.validate(target) else if (inputElement.val() !== _password.val()) { @@ -265,9 +285,10 @@ class ValidateForm extends Base { }); selectElement.on('change', function () { - toggleValidation(target); - }) + $(this).validate(target); + }); }); + return this; } @@ -345,7 +366,7 @@ class ValidateForm extends Base { * @returns {string} */ function multiplyPadding(pad1, pad2) { - return 'calc(' + pad1 + ' * ' + pad2 + ')'; + return `calc(${pad1} * ${pad2})`; } /** @@ -361,6 +382,9 @@ function onAlertClose(context) { }); } +errorBag = {}; +errorCount = {}; + jQuery.fn.extend({ /** * Create a new instance of Fusion Form Validator @@ -394,6 +418,19 @@ jQuery.fn.extend({ let _target_id = $(this[0]).attr('id') return _target_id.match(/phone/gi); }, + /** + * Checks if a form element has any validation (* When using Fusion Form Validator *) errors + * @returns {Error|boolean} + */ + hasErrors() { + let _target = this[0]; + + if (_target.tagName.toLowerCase() === 'form') + return errorCount[_target.id] > 0; + + console.error(`Expected 'form element' but '${_target.tagName.toLowerCase()} element' given`); + return new Error(`Function hasErrors() accepts only 'form element', '${_target.tagName.toLowerCase()} element' given!`); + }, /** * Close specified Validation alert * @param context @@ -402,25 +439,29 @@ jQuery.fn.extend({ removeValidationText(context, close = false) { let _target = this[0], e = $(_target).validationProps(); + delete errorBag[_target.form.id][_target.id]; + errorCount[_target.form.id] = Object.keys(errorBag[_target.form.id]).length; if (close) - $(e.validField + ' > .alert', context).alert('close'); + $(`${e.validField} > .alert`, context).alert('close'); $(_target).removeClass('border-danger').removeClass('border-success'); $(e.validationIcon).fadeOut(); $(_target).removeValidPad(); + + return _target; }, validationProps() { let target = this[0], - target_id = $(target).attr('id'), - _target_id = '#' + target_id + target_id = target.id, + _target_id = `#${target_id}`; return { id: _target_id, - validField: $(_target_id + 'Valid'), - validIcon: $(form_group + _target_id + '_group ' + input_group + ' > .valid'), - invalidIcon: $(form_group + _target_id + '_group ' + input_group + ' > .invalid'), - validationIcon: $(form_group + _target_id + '_group ' + input_group + ' > .validation-icon') + validField: $(`${_target_id}Valid`), + validIcon: $(form_group + `${_target_id}_group ${input_group} > .valid`), + invalidIcon: $(form_group + `${_target_id}_group ${input_group} > .invalid`), + validationIcon: $(form_group + `${_target_id}_group ${input_group} > .validation-icon`) } }, /** @@ -464,6 +505,7 @@ jQuery.fn.extend({ addValidText(context, message, icon = true) { let _target = this[0], e = $(_target).validationProps(); + delete errorBag[_target.form.id][_target.id]; if (icon) { e.invalidIcon.fadeOut(0); @@ -482,6 +524,7 @@ jQuery.fn.extend({ let _target = this[0], _message = !message ? 'This field is required' : message, e = $(_target).validationProps(); + errorBag[_target.form.id][_target.id] = true; if (icon) { e.validIcon.fadeOut(0); @@ -498,30 +541,30 @@ jQuery.fn.extend({ }, displayMessage(bs_alert, fa_icon, message, id, context = null, dismissible = false, wait = false) { let message_tag = this[0], - _bs_alert = dismissible ? bs_alert + ' alert-dismissible' : bs_alert, + _bs_alert = dismissible ? `${bs_alert} alert-dismissible` : bs_alert, _message_tag = context ? $(message_tag, context) : $(message_tag), _dismiss = dismissible ? '' : '', _wait = wait ? '
Please Wait...' : ''; - _message_tag.html('\ -