Invia modulo utilizzando JavaScript

Per inviare un modulo HTML con JavaScript, in genere si gestisce il suo submit event, si controllano i valori inseriti e si lascia che il browser invii i dati validi all’indirizzo indicato in action. L’esempio seguente crea un modulo, ne legge i campi e usa la convalida lato client per bloccare gli invii incompleti. Prima di usare i dati ricevuti, il server deve comunque convalidarli autonomamente. (invio del modulo)

Creare un modulo HTML

Assegna a ogni controllo un name, che diventa la relativa chiave nei dati inviati dal modulo. Aggiungi un’etichetta per dare a ogni campo un nome accessibile. action specifica l’URL che riceve il modulo, mentre method stabilisce come il browser invia i dati. Una richiesta POST inserisce i dati del modulo nel corpo della richiesta; spetta al server decidere come elaborarli o memorizzarli.

<form action="/signup" method="post" id="signup-form">
  <label for="username">Name</label>
  <input id="username" name="username" type="text" required>

  <label for="email">Email</label>
  <input id="email" name="email" type="email" required>

  <button type="submit">Sign up</button>
  <p id="form-message" role="status"></p>
</form>

Questo markup per una pagina del browser è un esempio statico. Quando il modulo è valido e l’utente preme il pulsante di invio, il browser invia i controlli con nome all’indirizzo /signup.

Accedere al modulo

Seleziona il modulo tramite il suo ID con document.getElementById() o document.querySelector(). Il codice per il browser riportato di seguito presuppone che il markup precedente sia già presente nella pagina; usa lo stesso riferimento form anche nel gestore dell’evento submit successivo.

const form = document.getElementById("signup-form");

Il risultato è l’elemento del modulo. Se lo script viene eseguito prima che il browser abbia analizzato il modulo, inseriscilo dopo il modulo oppure attendi che il documento sia pronto.

Ottenere i valori dei campi del modulo in JavaScript

La raccolta elements del modulo consente di recuperare i controlli tramite il rispettivo name. Il testo corrente di ciascun controllo è disponibile nella proprietà singolare .value. Per il modulo precedente, puoi leggere nome ed email così:

const username = form.elements.username.value.trim();

const email = form.elements.email.value.trim();

Gli attributi name nell’HTML devono corrispondere alle chiavi usate con form.elements. Il metodo trim() rimuove gli spazi iniziali e finali prima del controllo dei valori.

Convalidare i dati dei campi del modulo in JavaScript

La funzione di supporto qui sotto controlla che entrambe le stringhe dei campi contengano del testo. Restituisce un valore booleano che un gestore della pagina può usare insieme ai valori letti dal modulo. L’oggetto di esempio contiene un nome e un indirizzo email; il programma stampa il risultato per quei valori:

function isSignupComplete(username, email) {
  return username.length > 0 && email.length > 0;
}

const sample = { username: "Ada", email: "ada@example.com" };
console.log(isSignupComplete(sample.username, sample.email));

true

Prima di generare l’evento submit del modulo, il browser controlla required e type="email". Un nome vuoto o un indirizzo email malformato viene rifiutato in questa fase: il listener non viene eseguito, non viene chiamato preventDefault() e il browser mostra il proprio messaggio di convalida. Un nome composto solo da spazi supera il controllo required, quindi viene ricevuto dal listener seguente; trim() lo trasforma in una stringa vuota, il controllo personalizzato blocca l’invio chiamando preventDefault() e la pagina mostra un proprio messaggio.

Per un gestore della pagina, aggiungi un listener al modulo selezionato e applica lo stesso controllo ai valori correnti:

form.addEventListener("submit", (event) => { const username = form.elements.username.value.trim(); const email = form.elements.email.value.trim(); const message = document.getElementById("form-message"); if (!isSignupComplete(username, email)) { event.preventDefault(); message.textContent = "Enter your name and email."; return; } message.textContent = "Submitting…"; });

I testi mostrati dall’esempio inline, “Enter your name and email.” e “Submitting…”, restano in inglese.

Se il controllo viene superato, il gestore lascia proseguire il normale flusso di invio del browser. Se fallisce, event.preventDefault() impedisce al browser di inviare il modulo e il messaggio indica cosa correggere. Questa convalida lato client serve a fornire un riscontro all’utente, ma non è una misura di sicurezza: l’endpoint deve comunque eseguire la convalida lato server, perché le richieste possono essere inviate senza usare questa pagina o il suo JavaScript.

Se altro codice deve avviare l’invio, preferisci form.requestSubmit(): segue il normale flusso di convalida e dell’evento submit. La chiamata form.submit() invia direttamente il modulo senza eseguire la convalida dei vincoli né generare l’evento submit, quindi un listener come quello mostrato non viene eseguito.