Utilizzando il modello async/await di JavaScript possiamo gestire la validazione dei form.
La seguente funzione restituisce una Promise con il risultato della validazione.
'use strict';
const validate = form => {
let errors = [];
let name = form.querySelector('#name');
let message = form.querySelector('#message');
if(name.value.length === 0) {
errors.push({
field: '#name',
msg: 'Required field.'
});
}
if(message.value.length === 0) {
errors.push({
field: '#message',
msg: 'Required field.'
});
}
return new Promise((resolve, reject) => {
if(errors.length > 0) {
reject(errors);
} else {
resolve('Thank you');
}
});
};
Utilizzeremo il modello async/await all'atto dell'invio del form.
'use strict';
let form = document.querySelector('#form');
form.addEventListener('submit', function( e ) {
e.preventDefault();
let elementForm = this;
let messages = elementForm.querySelectorAll('.msg');
if(messages.length > 0) {
for(let i = 0; i < messages.length; i++) {
let message = messages[i];
message.parentNode.removeChild(message);
}
}
(async () => {
try {
let valid = await validate(elementForm);
let msg = document.createElement('p');
msg.className = 'msg success';
msg.innerHTML = valid;
elementForm.appendChild(msg);
} catch(err) {
err.forEach(er => {
let field = document.querySelector(er.field);
field.insertAdjacentHTML('afterend', '<p class="msg error">' + er.msg + '</p>');
});
}
})();
});