JavaScript: gestire la validazione dei form con il modello async/await

JavaScript: gestire la validazione dei form con il modello async/await

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

Torna su