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