JavaScript: impedire l'invio di un form se ci sono errori di validazione

In JavaScript possiamo impedire l'invio di un form se ci sono errori di validazione.

Creiamo una funzione di utility che valida i campi del form e restituisce un array di campi non validi.

'use strict';

const validateForm = form => {
    let fields = form.querySelectorAll('.required');
    let invalidFields = [];

    Array.prototype.forEach.call(fields, field => {
        let value = field.value;
        if(value.length === 0 || /^\s+$/.test(value)) {
            invalidFields.push(field);
        }
    });
    return invalidFields;
};

Se ci sono campi non validi, blocchiamo l'evento predefinito di invio del form.

document.addEventListener('DOMContentLoaded', () => {
    let form = document.querySelector('#contact-form');
    form.addEventListener('submit', e => {
        let areInvalidFields = validateForm(form);
        if(areInvalidFields.length > 0) {
            e.preventDefault();
            areInvalidFields.forEach(input => {
                input.classList.add('invalid');
            });
        }
    });
});