I am trying to add a JS validation check on a webform in a custom module but dont get it to work. Who can help me to point out the issue in the code below. The file is added as asset into the manifest file. It should check if the Bank account has a correct IBAN nr.
II get these error message:
The following modules are needed by other modules but have not been defined, they may not be present in the correct asset bundle:
- web.public.widget
The following modules could not be loaded because they have unmet dependencies, this is a secondary error which is likely caused by one of the above problems:
- @leden_extensie/js/iban_validation
here is the iban_validation.js script located under leden_extensie/src/js
/** @odoo-module **/
import publicWidget from 'web.public.widget';
import { loadJS } from '@web/core/assets';
async function loadIbanLib() {
await loadJS('https://cdn.jsdelivr.net/npm/iban@0.0.10/iban.js');
return window.IBAN;
}
publicWidget.registry.IBANValidation = publicWidget.Widget.extend({
selector: '.container',
start: function () {
this._super.apply(this, arguments);
document.addEventListener('DOMContentLoaded', this._onDomContentLoaded.bind(this));
},
_onDomContentLoaded: async function () {
console.log('DOMContentLoaded event fired');
try {
const IBAN = await loadIbanLib();
console.log('IBAN library loaded:', IBAN);
const bankrekeningInput = document.getElementById('bankrekening');
if (bankrekeningInput) {
bankrekeningInput.addEventListener('blur', () => this._validateAndFormatIBAN(IBAN));
console.log('Event listener added to bankrekening input');
} else {
console.log('bankrekening input not found');
}
} catch (error) {
console.error('Error loading IBAN library:', error);
}
},
_validateAndFormatIBAN: function (IBAN) {
const bankrekeningInput = document.getElementById('bankrekening');
const bankrekening = bankrekeningInput.value.trim();
console.log('Validating IBAN:', bankrekening);
if (IBAN.isValid(bankrekening)) {
bankrekeningInput.value = IBAN.printFormat(bankrekening, ' ');
bankrekeningInput.setCustomValidity('');
console.log('Valid IBAN:', bankrekeningInput.value);
} else {
bankrekeningInput.setCustomValidity('Invalid Bankrekening');
bankrekeningInput.reportValidity();
console.log('Invalid IBAN');
}
}
});