コンテンツへスキップ
メニュー
この質問にフラグが付けられました
1 返信
1657 ビュー

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



アバター
破棄
最善の回答

Hi,

Import the dependencies properly:

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


Hope it helps

アバター
破棄
関連投稿 返信 ビュー 活動
0
11月 24
1272
2
1月 25
1151
0
11月 24
1400
2
7月 24
2956
1
5月 25
1749