Display a form and use webassets to use script form.validate
script works with no errors in console.log
Uncaught SyntaxError: redeclaration of const errors is displayed in console.log
Tested on 5.0 and 5.1.1, discussed on Extension development room and @Fedik requested an issue raised.
Fedir Zinchuk
It a bug in validate.js, the code should be wrapped in to anonimous function or use type module
please open an issue
Labels |
Added:
No Code Attached Yet
|
Labels |
Added:
bug
|
I looked into how others have used punycode and modified validate.js to the following which appears to work and fixes the error.
`'use strict';
let punycode = new function Punycode() {
/** Highest positive signed 32-bit float value */
const maxInt = 2147483647; // aka. 0x7FFFFFFF or 2^31-1
/** Bootstring parameters */
const base = 36;
const tMin = 1;
const tMax = 26;
const skew = 38;
const damp = 700;
const initialBias = 72;
const initialN = 128; // 0x80
const delimiter = '-'; // '\x2D'
/** Regular expressions */
const regexPunycode = /^xn--/;
const regexNonASCII = /[^\0-\x7F]/; // Note: U+007F DEL is excluded too.
const regexSeparators = /[\x2E\u3002\uFF0E\uFF61]/g; // RFC 3490 separators
/** Error messages */
const errors = {
'overflow': 'Overflow: input needs wider integers to process',
'not-basic': 'Illegal input >= 0x80 (not a basic code point)',
'invalid-input': 'Invalid input'
};
/** Convenience shortcuts */
const baseMinusTMin = base - tMin;
const floor = Math.floor;
const stringFromCharCode = String.fromCharCode;
/--------------------------------------------------------------------------/
/**
RangeError
with the applicable error message./**
Array#map
utility function./**
Array#map
-like wrapper to work with domain name strings or email@
) intact.split(regex)
for IE8 compatibility. See #17./**
punycode.ucs2.encode
/**
punycode.ucs2.decode
/**
digitToBasic()
0
to base - 1
, or base
if/**
basicToDigit()
digit
, which needs to be in the range0
to base - 1
. If flag
is non-zero, the uppercase form isflag
is non-zero and digit
has no uppercase form./**
/**
// Handle the basic code points: let `basic` be the number of input code
// points before the last delimiter, or `0` if there is none, then copy
// the first basic code points to the output.
let basic = input.lastIndexOf(delimiter);
if (basic < 0) {
basic = 0;
}
for (let j = 0; j < basic; ++j) {
// if it's not a basic code point
if (input.charCodeAt(j) >= 0x80) {
error('not-basic');
}
output.push(input.charCodeAt(j));
}
// Main decoding loop: start just after the last delimiter if any basic code
// points were copied; start at the beginning otherwise.
for /* no final expression */
(let index = basic > 0 ? basic + 1 : 0; index < inputLength;) {
// `index` is the index of the next character to be consumed.
// Decode a generalized variable-length integer into `delta`,
// which gets added to `i`. The overflow checking is easier
// if we increase `i` as we go, then subtract off its starting
// value at the end to obtain `delta`.
const oldi = i;
for /* no condition */
(let w = 1, k = base; ; k += base) {
if (index >= inputLength) {
error('invalid-input');
}
const digit = basicToDigit(input.charCodeAt(index++));
if (digit >= base) {
error('invalid-input');
}
if (digit > floor((maxInt - i) / w)) {
error('overflow');
}
i += digit * w;
const t = k <= bias ? tMin : k >= bias + tMax ? tMax : k - bias;
if (digit < t) {
break;
}
const baseMinusT = base - t;
if (w > floor(maxInt / baseMinusT)) {
error('overflow');
}
w *= baseMinusT;
}
const out = output.length + 1;
bias = adapt(i - oldi, out, oldi == 0);
// `i` was supposed to wrap around from `out` to `0`,
// incrementing `n` each time, so we'll fix that now:
if (floor(i / out) > maxInt - n) {
error('overflow');
}
n += floor(i / out);
i %= out;
// Insert `n` at position `i` of the output.
output.splice(i++, 0, n);
}
return String.fromCodePoint(...output);
};
/**
// Convert the input in UCS-2 to an array of Unicode code points.
input = ucs2decode(input);
// Cache the length.
const inputLength = input.length;
// Initialize the state.
let n = initialN;
let delta = 0;
let bias = initialBias;
// Handle the basic code points.
for (const currentValue of input) {
if (currentValue < 0x80) {
output.push(stringFromCharCode(currentValue));
}
}
const basicLength = output.length;
let handledCPCount = basicLength;
// `handledCPCount` is the number of code points that have been handled;
// `basicLength` is the number of basic code points.
// Finish the basic string with a delimiter unless it's empty.
if (basicLength) {
output.push(delimiter);
}
// Main encoding loop:
while (handledCPCount < inputLength) {
// All non-basic code points < n have been handled already. Find the next
// larger one:
let m = maxInt;
for (const currentValue of input) {
if (currentValue >= n && currentValue < m) {
m = currentValue;
}
}
// Increase `delta` enough to advance the decoder's <n,i> state to <m,0>,
// but guard against overflow.
const handledCPCountPlusOne = handledCPCount + 1;
if (m - n > floor((maxInt - delta) / handledCPCountPlusOne)) {
error('overflow');
}
delta += (m - n) * handledCPCountPlusOne;
n = m;
for (const currentValue of input) {
if (currentValue < n && ++delta > maxInt) {
error('overflow');
}
if (currentValue === n) {
// Represent delta as a generalized variable-length integer.
let q = delta;
for /* no condition */
(let k = base; ; k += base) {
const t = k <= bias ? tMin : k >= bias + tMax ? tMax : k - bias;
if (q < t) {
break;
}
const qMinusT = q - t;
const baseMinusT = base - t;
output.push(stringFromCharCode(digitToBasic(t + qMinusT % baseMinusT, 0)));
q = floor(qMinusT / baseMinusT);
}
output.push(stringFromCharCode(digitToBasic(q, 0)));
bias = adapt(delta, handledCPCountPlusOne, handledCPCount === basicLength);
delta = 0;
++handledCPCount;
}
}
++delta;
++n;
}
return output.join('');
};
/**
/**
/--------------------------------------------------------------------------/
/** Define the public API /
const punycode = {
/*
* A string representing the current Punycode.js version number.
* @memberof punycode
* @type String
/
'version': '2.1.0',
/*
* An object of methods to convert from JavaScript's internal character
* representation (UCS-2) to Unicode code points, and back.
* @see https://mathiasbynens.be/notes/javascript-encoding
* @memberof punycode
* @type Object
/
'ucs2': {
'decode': ucs2decode,
'encode': ucs2encode
},
'decode': decode,
'encode': encode,
'toASCII': toASCII,
'toUnicode': toUnicode
};
}();
/*
@copyright (C) 2018 Open Source Matters, Inc. https://www.joomla.org
@license GNU General Public License version 2 or later; see LICENSE.txt
*/
class JFormValidator {
constructor() {
this.customValidators = {};
this.handlers = [];
this.handlers = {};
this.removeMarking = this.removeMarking.bind(this);
this.inputEmail = () => {
const input = document.createElement('input');
input.setAttribute('type', 'email');
return input.type !== 'text';
};
// Default handlers
this.setHandler('username', value => {
const regex = /[<|>|"|'|%|;|(|)|&]/i;
return !regex.test(value);
});
this.setHandler('password', value => {
const regex = /^\S[\S ]{2,98}\S$/;
return regex.test(value);
});
this.setHandler('numeric', value => {
const regex = /^(\d|-)?(\d|,).?\d$/;
return regex.test(value);
});
this.setHandler('email', value => {
const newValue = punycode.toASCII(value);
const regex = /^[a-zA-Z0-9.!#$%&’+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)$/;
return regex.test(newValue);
});
// Attach all forms with a class 'form-validate'
const forms = [].slice.call(document.querySelectorAll('form'));
forms.forEach(form => {
if (form.classList.contains('form-validate')) {
this.attachToForm(form);
}
});
}
get custom() {
return this.customValidators;
}
set custom(value) {
this.customValidators = value;
}
setHandler(name, func, en) {
const isEnabled = en === '' ? true : en;
this.handlers[name] = {
enabled: isEnabled,
exec: func
};
}
// eslint-disable-next-line class-methods-use-this
markValid(element) {
// Get a label
const label = element.form.querySelector(label[for="${element.id}"]
);
let message;
if (element.classList.contains('required') || element.getAttribute('required')) {
if (label) {
message = label.querySelector('span.form-control-feedback');
}
}
element.classList.remove('form-control-danger');
element.classList.remove('invalid');
element.classList.add('form-control-success');
element.parentNode.classList.remove('has-danger');
element.parentNode.classList.add('has-success');
element.setAttribute('aria-invalid', 'false');
// Remove message
if (message) {
message.parentNode.removeChild(message);
}
// Restore Label
if (label) {
label.classList.remove('invalid');
}
}
// eslint-disable-next-line class-methods-use-this
markInvalid(element, empty) {
// Get a label
const label = element.form.querySelector(label[for="${element.id}"]
);
element.classList.remove('form-control-success');
element.classList.remove('valid');
element.classList.add('form-control-danger');
element.classList.add('invalid');
element.parentNode.classList.remove('has-success');
element.parentNode.classList.add('has-danger');
element.setAttribute('aria-invalid', 'true');
// Display custom message
let mesgCont;
const message = element.getAttribute('data-validation-text');
if (label) {
mesgCont = label.querySelector('span.form-control-feedback');
}
if (!mesgCont) {
const elMsg = document.createElement('span');
elMsg.classList.add('form-control-feedback');
if (empty && empty === 'checkbox') {
elMsg.innerHTML = message !== null ? Joomla.sanitizeHtml(message) : Joomla.sanitizeHtml(Joomla.Text._('JLIB_FORM_FIELD_REQUIRED_CHECK'));
} else if (empty && empty === 'value') {
elMsg.innerHTML = message !== null ? Joomla.sanitizeHtml(message) : Joomla.sanitizeHtml(Joomla.Text._('JLIB_FORM_FIELD_REQUIRED_VALUE'));
} else {
elMsg.innerHTML = message !== null ? Joomla.sanitizeHtml(message) : Joomla.sanitizeHtml(Joomla.Text._('JLIB_FORM_FIELD_INVALID_VALUE'));
}
if (label) {
label.appendChild(elMsg);
}
}
// Mark the Label as well
if (label) {
label.classList.add('invalid');
}
}
// eslint-disable-next-line class-methods-use-this
removeMarking(element) {
// Get the associated label
let message;
const label = element.form.querySelector(label[for="${element.id}"]
);
if (label) {
message = label.querySelector('span.form-control-feedback');
}
element.classList.remove('form-control-danger');
element.classList.remove('form-control-success');
element.classList.remove('invalid');
element.classList.add('valid');
element.parentNode.classList.remove('has-danger');
element.parentNode.classList.remove('has-success');
// Remove message
if (message) {
if (label) {
label.removeChild(message);
}
}
// Restore Label
if (label) {
label.classList.remove('invalid');
}
}
handleResponse(state, element, empty) {
const tagName = element.tagName.toLowerCase();
// Set the element and its label (if exists) invalid state
if (tagName !== 'button' && element.value !== undefined || tagName === 'fieldset') {
if (state === false) {
this.markInvalid(element, empty);
} else {
this.markValid(element);
}
}
}
validate(element) {
let tagName;
// Ignore the element if its currently disabled,
// because are not submitted for the http-request.
// For those case return always true.
if (element.getAttribute('disabled') === 'disabled' || element.getAttribute('display') === 'none') {
this.handleResponse(true, element);
return true;
}
// If the field is required make sure it has a value
if (element.getAttribute('required') || element.classList.contains('required')) {
tagName = element.tagName.toLowerCase();
if (tagName === 'fieldset' && (element.classList.contains('radio') || element.classList.contains('checkboxes'))) {
// No options are checked.
if (element.querySelector('input:checked') === null) {
this.handleResponse(false, element, 'checkbox');
return false;
}
} else if (element.getAttribute('type') === 'checkbox' && element.checked !== true || tagName === 'select' && !element.value.length) {
this.handleResponse(false, element, 'checkbox');
return false;
} else if (!element.value || element.classList.contains('placeholder')) {
// If element has class placeholder that means it is empty.
this.handleResponse(false, element, 'value');
return false;
}
}
// Only validate the field if the validate class is set
const handler = element.getAttribute('class') && element.getAttribute('class').match(/validate-([a-zA-Z0-9_-]+)/) ? element.getAttribute('class').match(/validate-([a-zA-Z0-9_-]+)/)[1] : '';
if (element.getAttribute('pattern') && element.getAttribute('pattern') !== '') {
if (element.value.length) {
const isValid = new RegExp(`^${element.getAttribute('pattern')}$`).test(element.value);
this.handleResponse(isValid, element, 'empty');
return isValid;
}
if (element.hasAttribute('required') || element.classList.contains('required')) {
this.handleResponse(false, element, 'empty');
return false;
}
this.handleResponse(true, element);
return true;
}
if (handler === '') {
this.handleResponse(true, element);
return true;
}
// Check the additional validation types
if (handler && handler !== 'none' && this.handlers[handler] && element.value) {
// Execute the validation handler and return result
if (this.handlers[handler].exec(element.value, element) !== true) {
this.handleResponse(false, element, 'invalid_value');
return false;
}
}
// Return validation state
this.handleResponse(true, element);
return true;
}
isValid(form) {
let valid = true;
let message;
let error;
let fields;
const invalid = [];
// Validate form fields
if (form.nodeName === 'FORM') {
fields = [].slice.call(form.elements);
} else {
fields = [].slice.call(form.querySelectorAll('input, textarea, select, button, fieldset'));
}
fields.forEach(field => {
if (this.validate(field) === false) {
valid = false;
invalid.push(field);
}
});
// Run custom form validators if present
if (Object.keys(this.customValidators).length) {
Object.keys(this.customValidators).foreach(key => {
if (this.customValidators[key].exec() !== true) {
valid = false;
}
});
}
if (!valid && invalid.length > 0) {
if (form.getAttribute('data-validation-text')) {
message = form.getAttribute('data-validation-text');
} else {
message = Joomla.Text._('JLIB_FORM_CONTAINS_INVALID_FIELDS');
}
error = {
error: [message]
};
Joomla.renderMessages(error);
}
return valid;
}
attachToForm(form) {
let elements;
if (form.nodeName === 'FORM') {
elements = [].slice.call(form.elements);
} else {
elements = [].slice.call(form.querySelectorAll('input, textarea, select, button, fieldset'));
}
// Iterate through the form object and attach the validate method to all input fields.
elements.forEach(element => {
const tagName = element.tagName.toLowerCase();
if (['input', 'textarea', 'select', 'fieldset'].indexOf(tagName) > -1 && element.classList.contains('required')) {
element.setAttribute('required', '');
}
// Attach isValid method to submit button
if ((tagName === 'input' || tagName === 'button') && (element.getAttribute('type') === 'submit' || element.getAttribute('type') === 'image')) {
if (element.classList.contains('validate')) {
element.addEventListener('click', () => this.isValid(form));
}
} else if (tagName !== 'button' && !(tagName === 'input' && element.getAttribute('type') === 'button')) {
// Attach validate method only to fields
if (tagName !== 'fieldset') {
element.addEventListener('blur', ({
target
}) => this.validate(target));
element.addEventListener('focus', ({
target
}) => this.removeMarking(target));
if (element.classList.contains('validate-email') && this.inputEmail) {
element.setAttribute('type', 'email');
}
}
}
});
}
}
const initialize = () => {
document.formvalidator = new JFormValidator();
// Cleanup
document.removeEventListener('DOMContentLoaded', initialize);
};
document.addEventListener('DOMContentLoaded', initialize);
`
Change
"type": "module"
Note: Strict mode should be restored, for the script, In joomla 4.4
Not really, the script/file was supposed to be ESM thus strict by default, reduced scoped (the reported issue), etc. but unfortunately the script was loaded as legacy js file with attribute defer
instead of the proper attribute type="module"
yes, and no.
the script supposed to be wrapped in anonymous function with strict mode, and only removed when we change type to module.
so for 4.4 it should be strict mode. there probably few more scripts which spills its variables globally. and that is realy bad.
type=module can be only in future 5.x or 6.x idk, as feature not bugfix
okay, it is a horrible bug, also affect core js
There are PRs for this so it should be closed
Status | New | ⇒ | Closed |
Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2024-07-22 21:37:37 |
Closed_By | ⇒ | Quy |
Note: Strict mode should be restored, for the script, In joomla 4.4