Bỏ qua để đến Nội dung
Menu
Câu hỏi này đã bị gắn cờ
1 Trả lời
1651 Lượt xem

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



Ảnh đại diện
Huỷ bỏ
Câu trả lời hay nhất

Hi,

Import the dependencies properly:

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


Hope it helps

Ảnh đại diện
Huỷ bỏ
Bài viết liên quan Trả lời Lượt xem Hoạt động
0
thg 11 24
1270
2
thg 1 25
1151
0
thg 11 24
1384
2
thg 7 24
2950
1
thg 5 25
1746