Skip to Content
Menu
This question has been flagged

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');
        }
    }
});



Avatar
Discard
Best Answer

Hi,

Import the dependencies properly:

import PublicWidget from "@web/legacy/js/public/public_widget";


Hope it helps

Avatar
Discard
Related Posts Replies Views Activity
0
Nov 24
1267
2
Jan 25
1149
0
Nov 24
1363
2
Jul 24
2932
1
May 25
1727