Possiamo implementare la validazione inline dei form con il solo JavaScript.
L'unico helper di cui abbiamo bisogno è il modulo validator, soprattutto per dati complessi come gli indirizzi e-mail.
'use strict';
const validate = field => {
if(field.type === 'email') {
return (validator.isEmail(field.value));
} else {
return (!validator.isEmpty(field.value));
}
};
const clearMessage = field => {
let msg = field.nextElementSibling;
if(msg !== null && msg.classList.contains('alert')) {
msg.parentNode.removeChild(msg);
}
};
const createMsg = (msg, className, element) => {
let m = document.createElement('p');
m.className = 'alert ' + className;
m.innerHTML = msg;
element.appendChild(m);
};
document.addEventListener('DOMContentLoaded', () => {
let form = document.querySelector('#form');
let fields = form.querySelectorAll('input[type="text"],input[type="email"],textarea');
Array.prototype.forEach.call(fields, field => {
field.addEventListener('blur', () => {
if(!validate(field)) {
createMsg('Invalid value.', 'alert-danger', field.parentNode);
}
});
field.addEventListener('focus', () => {
clearMessage(field);
});
});
});
Come si può notare, sull'evento blur eseguiamo la validazione e sull'evento focus rimuoviamo l'eventuale messaggio di errore inserito dopo il campo del form.