Impedire l'invio di un modulo in JavaScript
Se necessario, è possibile impedire l'invio
di un modulo. Questo viene fatto tramite il metodo a te già noto
preventDefault.
Diamo un'occhiata a un esempio.
Supponiamo di avere il seguente modulo:
<form action="/handler/" method="POST">
<input name="test1">
<input name="test2">
<input type="submit">
</form>
Otteniamo un riferimento ad esso in una variabile:
let form = document.querySelector('form');
L'invio del modulo può essere intercettato tramite l'evento
submit:
form.addEventListener('submit', function() {
});
Ora impediamo l'invio del modulo:
form.addEventListener('submit', function(event) {
event.preventDefault();
});
È dato un modulo con un input. Al tentativo di invio, verifica se nell'input è stato inserito un indirizzo email corretto. In caso contrario, impedisci l'invio del modulo e visualizza un messaggio di errore.