Come impedire l'invio di un modulo in JavaScript

Per impedire l’invio di un modulo quando i suoi dati non superano la convalida lato client, gestisci l’evento submit del modulo e chiama event.preventDefault() solo quando un controllo fallisce. Collega il listener al modulo, non al suo pulsante di invio: l’evento submit del modulo copre anche l’invio da tastiera. Quando i dati sono validi, lascia invariata l’azione predefinita in modo che il browser possa inviare il modulo.

Impedire l’invio di un modulo con un listener dell’evento submit

Un listener submit è la scelta abituale per il nuovo codice JavaScript. Questo esempio Node.js autonomo modella l’interfaccia degli eventi utilizzata da un modulo del browser e mostra un’e-mail valida che raggiunge il normale percorso di invio. In una pagina, registra lo stesso gestore con form.addEventListener('submit', handleSubmit).

const form = {
  listener: null,
  addEventListener(type, callback) {
    if (type === 'submit') this.listener = callback;
  },
  submit(event) {
    this.listener(event);
    return !event.defaultPrevented;
  }
};

const email = 'reader@example.com';
const handleSubmit = (event) => {
  if (!email.includes('@')) event.preventDefault();
};

form.addEventListener('submit', handleSubmit);
const event = {
  defaultPrevented: false,
  preventDefault() {
    this.defaultPrevented = true;
  }
};
console.log(form.submit(event) ? 'Form may submit' : 'Submission prevented');

Il piccolo oggetto modulo dell’esempio consente al gestore di essere eseguito in Node.js; in un browser, il browser fornisce il modulo e l’evento. Nella tua pagina, leggi i controlli rilevanti all’interno del gestore e chiama event.preventDefault() quando un controllo fallisce. Chiamarlo annulla l’azione di invio predefinita del browser; non naviga verso un’altra pagina né torna indietro nella cronologia. Sia un clic sul pulsante di invio sia la pressione di Invio in un controllo del modulo portano all’evento submit del modulo.

Usare un gestore onsubmit inline

Un gestore onsubmit inline è un’alternativa per il markup esistente. Ad esempio, <form onsubmit="return validateForm()"> chiama una funzione quando il modulo viene inviato. Restituisci false quando la convalida fallisce per annullare l’invio; restituisci true quando il modulo è pronto per l’invio. Mantieni la funzione disponibile per la pagina e assicurati che restituisca un valore su ogni percorso. Per il nuovo codice, un listener di solito mantiene il comportamento separato dall’HTML.

Impedire l’invio con jQuery

Se un progetto utilizza già jQuery, collega un gestore al modulo con $('#myForm').on('submit', function (event) { ... }). Controlla i valori del modulo all’interno della callback e chiama event.preventDefault() solo quando la convalida fallisce. Non chiamare $('#myForm').submit() dal gestore per impedire l’invio: ciò attiva il comportamento di invio invece di annullare l’azione predefinita del browser. jQuery è facoltativo; il nativo addEventListener fornisce lo stesso evento del modulo senza la dipendenza.

Convalidare gli input e fornire feedback

Quando un controllo fallisce, impedisci l’invio e mostra un messaggio conciso accanto al campo che richiede attenzione. Associa quel messaggio al suo controllo, esponi l’errore alla tecnologia assistiva e sposta il focus sul primo campo da correggere quando appropriato. Evita di affidarti a un alert come unico feedback. Quando tutti i controlli passano, consenti all’invio di continuare e lascia che anche il server convalidi i dati ricevuti; i controlli lato client migliorano l’interazione ma non proteggono i dati da soli.

Usa vincoli HTML come required, type="email" e minlength quando si adattano al modulo. Il browser può segnalare questi errori prima che venga inviato un normale evento submit; controlli personalizzati possono aggiungere regole che i vincoli HTML non esprimono. Non disabilitare il pulsante di invio come sostituto della convalida, poiché gli utenti hanno comunque bisogno di un percorso chiaro per correggere il loro input.