JavaScript: validazione inline dei campi dei form con Bootstrap

Con JavaScript è semplice effettuare la validazione inline dei campi dei form utilizzando Bootstrap.

Si tratta di usare l'evento blur e la classe is-invalid di Bootstrap.

'use strict';

document.addEventListener('DOMContentLoaded', () => {
    const fields = document.querySelector('#form').querySelectorAll('[required]');
    fields.forEach(field => {
        field.addEventListener('blur', () => {
            field.classList.remove('is-invalid');
            if(field.value.length === 0) {
                field.classList.add('is-invalid');
            }
        });
    });
});