JavaScript: validazione inline dei form

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.

Demo

JavaScript: inline form validation