La maggior parte dei form di registrazione controllano i dati inseriti prima di inviarli. Ad esempio, quando crei un account Biadets viene visualizzato un messaggio di errore se non si inserisce un'email corretta.
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 a questo attributo con elemento.value.
Successivamente, possiamo utilizzare onclick (che approfondiremo più avanti) per chiamare una funzione che prelevi i dati. In questo esempio, al click del pulsante apparirà un popup con il contenuto di testo inserito dall'utente:
<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() tramite il return.
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.