JavaScript: l'evento reset dei form

L'evento reset di un form può essere usato in JavaScript per riportare un form allo stato originale.

Un elemento di tipo input o button con l'attributo type impostato su reset, se attivato cancella i valori inseriti dai campi dei form.

Quando il pulsante viene attivato, si innesca l'evento reset sul form. Se vogliamo impedire l'azione predefinita del browser, possiamo intercettare l'evento in questo modo:


const form = document.querySelector('#form');

form.addEventListener('reset', evt => {
    evt.preventDefault();
    // Routine personalizzata
}, false);

In questo caso i campi manterranno i valori inseriti. Questa logica è utile quando vogliamo gestire il reset in maniera personalizzata aggiungendo una routine particolare che sostituisce quella predefinita.

Ad esempio potremmo voler rimuovere gli eventuali messaggi di errore ancora presenti. In questo caso possiamo aggiungere il nostro codice senza bloccare l'azione predefinita del browser.


const form = document.querySelector('#form');

form.addEventListener('reset', () => {
    // Il browser ha cancellato i valori dei campi

    // Rimuoviamo i messaggi di errore
    
    form.querySelectorAll('.error').forEach(err => {
        err.remove();
    });
}, false);

Un caso in cui questo evento si rivela fondamentale sono i form multi-step o form in più passaggi. In questo caso intercettando l'evento possiamo fare in modo che l'utente riparta dall'inizio, ad esempio resettando il contatore che tiene traccia dello step corrente.

Torna su