formvalidation/css/formValidation.min.css formvalidation/js/FormValidation.full.min.js formvalidation/js/plugins/AutoFocus.min.js formvalidation/js/plugins/Transformer.min.js 0) { return { valid: true }; } return { valid: false }; } }; }; var formId = document.querySelector("%selector%").getAttribute('id'), dataAttr = document.querySelector("%selector%").dataset, form = forms[formId], frameworkPlugin, isDefaultMessageContainer = true, messagePlugin; if (document.querySelector('%selector% button[name="submit"]')) { alert('The Formvalidation plugin does not allow to name the submit button "submit". You have to rename it or the form will not work.'); } if (document.querySelector('%selector% input[type="hidden"][required]')) { alert('The Formvalidation plugin does not allow the "required" attribute on an hidden input. Remove the "required" attribute or the form will not work.'); } let isBulmaHorizontal = document.querySelector("%selector%").classList.contains('bulma-form') && document.querySelector("%selector%").classList.contains('bulma-form-horizontal'), isBs5 = document.querySelector("%selector%").classList.contains('bs5-form'), isBs5Horizontal = document.querySelector("%selector%").classList.contains('bs5-form') && document.querySelector("%selector%").classList.contains('form-horizontal'), isBs4 = document.querySelector("%selector%").classList.contains('bs4-form'), isBs4Horizontal = document.querySelector("%selector%").classList.contains('bs4-form') && document.querySelector("%selector%").classList.contains('form-horizontal'), isFoundationHorizontal = document.querySelector("%selector%").classList.contains('foundation-form') && document.querySelector("%selector%").classList.contains('form-horizontal'), isMaterial = document.querySelector("%selector%").classList.contains('material-form'), isTailwind = document.querySelector("%selector%").classList.contains('tailwind-form'), isUikit = document.querySelector("%selector%").classList.contains('uikit-form'), isUikitVertical = document.querySelector("%selector%").classList.contains('uk-form-stacked'); if (isBulmaHorizontal) { isDefaultMessageContainer = false; messagePlugin = new FormValidation.plugins.Message({ clazz: 'help is-danger', container: function (field, ele) { return ele.closest('.column'); } }); } else { messagePlugin = new FormValidation.plugins.Message(); } if (isBs5 || isBs4) { if (isBs5Horizontal || isBs4Horizontal) { frameworkPlugin = new FormValidation.plugins.%FRAMEWORK%({ defaultMessageContainer: isDefaultMessageContainer, rowSelector: function(field, ele) { // get the 1st class of closest parent div var classList = ele.closest('div[class*="col-"]').getAttribute('class').split(' ').filter(Boolean); return '.' + classList[0]; } }); } else if (isBs5) { frameworkPlugin = new FormValidation.plugins.%FRAMEWORK%({ defaultMessageContainer: isDefaultMessageContainer, rowSelector: function(field, ele) { // get the 1st class of closest parent div var classList = ele.closest('div[class*="bs5-form-stacked-element"]').getAttribute('class').split(' ').filter(Boolean); return '.' + classList[0]; } }); } else { frameworkPlugin = new FormValidation.plugins.%FRAMEWORK%({ defaultMessageContainer: isDefaultMessageContainer }); } } else if (isBulmaHorizontal) { frameworkPlugin = new FormValidation.plugins.%FRAMEWORK%({ defaultMessageContainer: isDefaultMessageContainer, rowSelector: function(field, ele) { // get the 1st class of closest parent div var classList = ele.closest('div[class*="column"]').getAttribute('class').split(' ').filter(Boolean); return '.' + classList[0]; } }); } else if (isMaterial) { frameworkPlugin = new FormValidation.plugins.%FRAMEWORK%({ defaultMessageContainer: isDefaultMessageContainer, rowSelector: function(field, ele) { if (ele.classList.contains('fv-group')) { // get the 1st class of closest parent div var classList = ele.closest('div').getAttribute('class').split(' ').filter(Boolean); return '.' + classList[0]; } return '.input-field'; } }); } else if (isTailwind) { frameworkPlugin = new FormValidation.plugins.%FRAMEWORK%({ defaultMessageContainer: isDefaultMessageContainer, rowSelector: function(field, ele) { // get the 1st class of closest parent div var classList = ele.closest('div[class*="grid-"]').getAttribute('class').split(' ').filter(Boolean); return '.' + classList[0]; } }); } else if (isUikit) { if (isUikitVertical) { frameworkPlugin = new FormValidation.plugins.%FRAMEWORK%({ defaultMessageContainer: isDefaultMessageContainer, rowSelector: function(field, ele) { // get the 1st class of closest parent div var classList = ele.closest('div[class*="uk-form-stacked-element"]').getAttribute('class').split(' ').filter(Boolean); return '.' + classList[0]; } }); } else { frameworkPlugin = new FormValidation.plugins.%FRAMEWORK%({ defaultMessageContainer: isDefaultMessageContainer, rowSelector: function(field, ele) { // get the 1st class of closest parent div var classList = ele.closest('div[class*="uk-width-"]').getAttribute('class').split(' ').filter(Boolean); return '.' + classList[0]; } }); } } else { frameworkPlugin = new FormValidation.plugins.%FRAMEWORK%({ defaultMessageContainer: isDefaultMessageContainer }); } form.fv = FormValidation.formValidation ( document.querySelector("%selector%"), { locale: '%language%', localization: FormValidation.locales.%language%, plugins: { %FRAMEWORK-LOWERCASE%: frameworkPlugin, declarative: new FormValidation.plugins.Declarative({ html5Input: true }), aria: new FormValidation.plugins.Aria(), autoFocus: new FormValidation.plugins.AutoFocus(), excluded: new FormValidation.plugins.Excluded({ excluded: function(field, element, elements) { // return true to exclude the field var parentHiddenWrapper = element.closest(['.hidden-wrapper:not(.on) *']); if (parentHiddenWrapper !== null) { if (dataAttr.fvDebug !== undefined) { console.log('%c' + field + ': validation skipped', 'color: #666'); } return true; } return false; } }), icon: new FormValidation.plugins.Icon(), message: messagePlugin, sequence: new FormValidation.plugins.Sequence({ enabled: true, }), submitButton: new FormValidation.plugins.SubmitButton(), trigger: new FormValidation.plugins.Trigger() } } ) .registerValidator('intphonenumber', intPhoneNumber) .registerValidator('tinymcenotempty', tinymceNotEmpty) .on('plugins.icon.set', function(e) { if (e.iconElement && document.getElementById(e.element.id).parentNode) { let $rightAddon = document.getElementById(e.element.id).parentNode.querySelector('[class*="phpfb-addon-after"]'); if (e.element.closest('.bulma-form') && e.element.closest('.field')) { $rightAddon = e.element.closest('.field').querySelector('[class*="phpfb-addon-after"]:not([class*="addon-control"])'); } if ($rightAddon) { if ($rightAddon.tagName === 'I' && (e.element.closest('.bs4-form') || e.element.closest('.bs5-form'))) { $rightAddon = $rightAddon.parentNode; } if (e.iconElement.tagName === 'I' && e.iconElement.parentNode.classList.contains('is-right')) { // Bulma icons e.iconElement.parentNode.style.right = '24px'; } else if (e.element.closest('.uikit-form')) { let style = $rightAddon.currentStyle || window.getComputedStyle($rightAddon), marginLeft = 0, paddingLeft = 0; if (style.marginLeft.match(/px/)) { marginLeft += parseInt(style.marginLeft.replace('px', '')); } if (style.paddingLeft.match(/px/)) { paddingLeft += parseInt(style.paddingLeft.replace('px', '')); } if (e.element.tagName === 'SELECT') { marginLeft += 20; } e.iconElement.style.right = ($rightAddon.offsetWidth + (marginLeft + paddingLeft / 2)) - 15 + 'px'; } else if (e.element.closest('.foundation-form')) { e.iconElement.style.right = $rightAddon.offsetWidth + 'px'; } else { e.iconElement.style.right = $rightAddon.offsetWidth + 15 + 'px'; } } else if (e.element.closest('.uikit-form') && e.element.tagName === 'SELECT') { e.iconElement.style.right = '20px'; } switch (e.status) { case 'Validating': e.iconElement.innerHTML = ''; break; case 'Invalid': e.iconElement.innerHTML = ''; break; case 'Valid': e.iconElement.innerHTML = ''; break; default: e.iconElement.innerHTML = ''; break; } } }); // callback if function exists if (typeof(fvCallback) !== "undefined") { setTimeout(fvCallback, 0); } if (dataAttr.fvDebug === undefined && dataAttr.fvNoAutoSubmit === undefined) { form.fv.on('core.form.valid', function() { if (!document.querySelector("%selector%").classList.contains('ajax-form')) { if (!document.querySelector("%selector%").classList.contains('has-recaptcha-v3') && !document.querySelector("%selector%").classList.contains('has-altcha')) { document.querySelector("%selector%").submit(); } } else { var formId = document.querySelector("%selector%").getAttribute('id'), $form = document.getElementById(formId); let data = new FormData($form); fetch($form.getAttribute('action'), { method: 'post', body: new URLSearchParams(data).toString(), headers: { 'Content-type': 'application/x-www-form-urlencoded' }, cache: 'no-store', credentials: 'include' }).then(function (response) { return response.text() }).then(function (data) { let $formContainer = document.querySelector('*[data-ajax-form-id="' + formId + '"]'); $formContainer.innerHTML = ''; loadData(data, '#' + $formContainer.id).then(() => { window.document.dispatchEvent(loadAjaxFormEvent[formId]); }); }).catch(function (error) { console.log(error); }); } }); } if (document.querySelector('%selector%.js-badger-accordion')) { form.fv.on('core.form.invalid', function() { let invalidClasses = ['.is-invalid', '.is-danger', '[aria-invalid="true"]', '.is-invalid-input', '.uk-form-danger']; firstInvalid = null; invalidClasses.forEach(ic => { if (document.querySelector('%selector% ' + ic) !== null) { firstInvalid = document.querySelector('%selector% ' + ic); } }); let fieldset = firstInvalid.closest('fieldset'); let fieldsetIndex = fieldset.dataset.acIndex; phpfbAccordion["%selector%"].closeAll(); phpfbAccordion["%selector%"].open(fieldsetIndex); }); } if (dataAttr.fvNoIcon !== undefined) { form.fv.deregisterPlugin('icon'); } if (!document.querySelector("%selector%").classList.contains('bulma-form') || !document.querySelector("%selector%").classList.contains('bulma-form-horizontal')) { form.fv.deregisterPlugin('message'); } if (document.querySelector('#' + formId + ' button[type="reset"]')) { document.querySelector('#' + formId + ' button[type="reset"]').addEventListener('click', () => { form.fv.resetForm(true); }); } if (document.querySelector('#' + formId + ' .litepick')) { Array.from(document.querySelectorAll('#' + formId + ' .litepick')).forEach(element => { element.addEventListener('change', function() { setTimeout(() => { form.fv.validateField(element.getAttribute('name')); if (element.dataset && element.dataset.elementEnd) { form.fv.validateField(document.getElementById(element.dataset.elementEnd).getAttribute('name')); } }, 400); }); }); } /*============================= = DEBUG = =============================*/ /* If the form has the fvDebug attribute (data-fv-debug=true): ----------------------------------------------------------- - the form will NOT be submitted - the browser console will log all the fields validation results - the browser console will log the form validation results */ if (dataAttr.fvDebug !== undefined) { const validFieldHandler = function(field) { // field is name of valid field console.log('%c' + field + ' value is valid', 'color: #28A745'); }; const invalidFieldHandler = function(field) { // field is name of invalid field console.log('%c' + field + ' value is invalid', 'color: #A62828'); }; form.fv.on('core.field.valid', validFieldHandler); form.fv.on('core.field.invalid', invalidFieldHandler); form.fv.on('core.form.valid', function() { console.log('%c=== FORM is VALID ===', 'background: #28A745;color:#FFF'); return false; }); } /*===== End of DEBUG ======*/ };]]>