I have seen the same issue.
(function ($, Drupal) {
Drupal.behaviors.wxtOrWetBoew = {
attach: function (context, settings) {
if (context == document) {
if (!$('body').hasClass('path-webform')) {
// Not a webform, do nothing.
console.log('Not a webform, validated by wxtOrWetBoew');
return;
}
if (WxtHelper.timeout > 0) {
console.log('timeout > 0');
WxtHelper.init();
}
}
}
};
})(jQuery, Drupal);
var WxtHelper = function() {
var errorHtml = '';
var erroredElements = [];
var erroredMessages = [];
var initialized = false;
var validationType = 'drupal';
var timeout = 200000;
function isReady() {
console.log('isReady()');
if (jQuery('.wb-frmvld').hasClass('wb-frmvld-inited') && jQuery('section.alert-danger').length > 0) {
WxtHelper.validationType = 'wet-boew';
return true;
}
else if($('.wb-frmvld').length == 0 && jQuery('section.alert-danger').length > 0 && $('.form-item--error-message').length > 0) {
WxtHelper.validationType = 'drupal';
return true;
}
console.log(WxtHelper.interval);
return false;
};
//Code you want to run when isReady conditions exist in the DOM.
function onReady() {
console.log('onReady()');
WxtHelper.validationHelper();
WxtHelper.validationWetboew();
if (WxtHelper.validationType == 'drupal') {
WxtHelper.moveAlertInsideLabel();
}
var timeout = 0;
// Make sure the event bindings do not accumulate, turn off first.
$('form.webform-submission-form').off('.wxthelper');
$('form.webform-submission-form').on('submit.wxthelper', function() {
// Re-initialize on submit.
WxtHelper.timeout = 50000;
WxtHelper.initialized = false;
WxtHelper.init();
});
};
//Contingency plan code you want to run if isReady conditions DO NOT exist in the DOM by timeout.
function opt_onTimeout() {
// Do nothing.
};
function addErrorToFieldset(item, index, arr) {
console.log('addErrorToFieldset()');
if (WxtHelper.validationType == 'drupal' && (jQuery('fieldset' + item).length || $('fieldset' + item + '--wrapper').length)) {
WxtHelper.errorHtml = '
';
if (!$('fieldset' + item + '--wrapper').find('.alert-danger').length) {
$('fieldset' + item + '--wrapper').find(item).prepend(WxtHelper.errorHtml);
}
if (!$('fieldset' + item).find('.alert-danger').length) {
$('fieldset' + item).find(item+'radios').prepend(WxtHelper.errorHtml);
}
}
}
function cleanErrorMessage(text) {
console.log('cleanErrorMessage()' + text);
const regex = /: (- |)([^]*)(field is required.|champ est requis.|field est requis.)/gm;
// Alternative syntax using RegExp constructor
const str = text;
var lang = $('html').attr('lang');
var subst = `: This $3`;
if (lang == 'fr') {
subst = `: Ce $3`;
}
// The substituted value will be contained in the result variable
var result = str.replace(regex, subst);
if (lang == 'fr' && WxtHelper.validationType == 'wet-boew') {
result = result.replace('Ce field est requis', 'Ce champ est requis');
}
return result;
}
function bruteForce() {
if ($('html').attr('lang') == 'fr') {
return 'Ce champ est requis.';
}
return 'This field is required.';
}
function moveAlertInsideLabel() {
console.log('moveAlertInsideLabel()');
var textItem = 'div[class*=form-type-text], div[class*=form-type-email],.form-type-select.form-group';
$(textItem).each(function(index, element) {
if ($(this).find('.alert-danger').length) {
var divAlert = $(this).find('.alert-danger');
var labelItem = $(this).find('label');
$(divAlert).clone().appendTo($(labelItem));
$(divAlert).remove();
}
});
var all = 'div[class*=form-type-text],div[class*=form-type],fieldset [class*=form-type],.form-type-select.form-group,fieldset.error';
$(all).each(function(index, element) {
if ($(this).find('.alert-danger').length) {
var desired = WxtHelper.bruteForce();
$(this).find('.alert-danger').text(desired);
}
});
}
function init() {
// How frequent to check for your object.
var interval = 200;
if (WxtHelper.isReady()) {
WxtHelper.onReady();
} else {
if (WxtHelper.timeout > 0) {
WxtHelper.timeout -= interval;
window.setTimeout(arguments.callee, interval);
} else {
console.log("WxtHelper.isReady() timed-out always returning false.");
}
}
}
function validationHelper() {
console.log('validationHelper()');
var allErrors = jQuery('section.alert-danger ul a').each(function(index) {
WxtHelper.erroredElements.push($(this).attr('href'));
WxtHelper.erroredMessages.push(WxtHelper.cleanErrorMessage($(this).text()));
});
WxtHelper.erroredElements.forEach(WxtHelper.addErrorToFieldset);
}
function validationWetboew() {
console.log('validationWetboew()');
if (WxtHelper.validationType == 'wet-boew') {
$('div.wb-frmvld form fieldset span.label-danger, div.wb-frmvld form > div.has-error span.label-danger').each(function(index) {
if (!$(this).hasClass('wxt-cleaned')) {
var prefixSpan = $(this).find('.prefix').prop('outerHTML');
var prefixText = $(this).find('.prefix').text();
$(this).find('span.prefix').remove();
var cleanedText = WxtHelper.cleanErrorMessage(prefixText + $(this).html());
cleanedText = cleanedText.replace(prefixText, '');
$(this).html(cleanedText);
$(this).prepend(prefixSpan);
$(this).addClass('wxt-cleaned');
}
});
}
}
return {
addErrorToFieldset: addErrorToFieldset,
bruteForce: bruteForce,
cleanErrorMessage: cleanErrorMessage,
erroredElements: erroredElements,
erroredMessages: erroredMessages,
errorHtml: errorHtml,
isReady: isReady,
init: init,
initialized: initialized,
moveAlertInsideLabel: moveAlertInsideLabel,
onReady: onReady,
timeout: timeout,
validationHelper: validationHelper,
validationWetboew: validationWetboew,
validationType: validationType,
}
}();