logo Dove iniziare Linguaggi Aiuto Blog
Home Dove iniziare Linguaggi Aiuto e Supporto Info e Blog

DOM e i form HTML

La maggior parte dei form di registrazione controllano i dati inseriti prima di inviarli. Ad esempio, vengono visualizzati dei messaggi di errore se non sono stati scritti correttamente.

Questo è possibile farlo tramite JavaScript: in questa lezione, vediamo i DOM e i form HTML.

La proprietà per ricevere i dati inseriti

Per prima cosa, vediamo qual è la proprietà fondamentale per ricevere i dati che un utente inserisce tramite input.

In HTML, l'attributo value contiene i dati inseriti dall'utente. In JavaScript, possiamo accedere all'attributo con elemento.value.

Successivamente, possiamo utilizzare onclick (che approfondiremo più avanti) per chiamare una funzione che prelevi i dati.

<input type="text" id="testo">
<button onclick="controllo()">Invia</button>

<script>
function controllo() {
  let testo_inserito = document.getElementById("testo").value;
  alert(testo_inserito);  // Risultato: il testo inserito dall'utente
}
</script>

Controlli dell'input inserito

Dopo aver prelevato l'input inserito dall'utente, possiamo effettuare i controlli che ci interessano. Poi, possiamo utilizzare la proprietà textContent che abbiamo visto nella lezione precedente per visualizzare un messaggio di errore.

<p>Inserisci una parola</p>
<input type="text" id="testo">
<button onclick="controllo()">Invia</button>
<p id="errore"></p>

<script>
function controllo() {
  let testo_inserito = document.getElementById("testo").value;
  
  for(let i = 0; i < testo_inserito.length; i++) {
    if(testo_inserito[i] > 0 && testo_inserito[i] < 9) {
      document.getElementById("errore").textContent = "Errore! Hai inserito un numero";
      return;
    }
  }
}
</script>

Nell'esempio, utilizziamo un ciclo di for per controllare che ogni carattere non sia un numero. Se viene trovato anche un singolo numero, viene visualizzato un messaggio di errore e si esce dalla funzione controllo()

Effettuare un controllo all'invio del form

Possiamo utilizzare onclick con un pulsante per effettuare il controllo. Ma se desideri inviare i dati del form, allora puoi utilizzare il metodo submit() solo quando le condizioni sono vere.

<form id="form" action="/elabora-dati.php">
  <p>Inserisci una parola</p>
  <input type="text" id="testo" name="testo">
  <button onclick="controllo()">Invia</button>
  <p id="errore"></p>
</form>

<script>
const form = document.getElementById("form");

function controllo() {
  let testo_inserito = document.getElementById("testo").value;
  
  for(let i = 0; i < testo_inserito.length; i++) {
    if(testo_inserito[i] > 0 && testo_inserito[i] < 9) {
      document.getElementById("errore").textContent = "Errore! Hai inserito un numero";
      return;
    }
  }

  form.submit();
}

// Evitare che venga inviato il form premendo "Invio"
form.addEventListener("submit", function(event){ event.preventDefault() });
</script>

Nota: puoi approfondire addEventListener() nella lezione DOM e gli eventi HTML.

Prova!Completa gli spazi vuoti con il testo appropriato.
<!-- Preleva l'input inserito dall'utente -->
<input type="text" id="testo">

<script>
let testo = document.getElementById("testo").;
</script>