Convalida dell'input

Fa parte della sezione JavaScript in azione del percorso HTML di Coddy. Lezione 5 di 27.

Quando si creano moduli, è importante fornire agli utenti un riscontro immediato mentre digitano, così da evitare che inviino informazioni errate. Questo si chiama convalida in tempo reale.

Per prima cosa, creiamo un campo di input di testo di base. Vogliamo verificare che la lunghezza del nome utente sia di almeno 5 caratteri.

<input type="text" id="username" placeholder="Enter username">

Ora, aggiungi un listener di eventi per convalidare l'input mentre l'utente digita:

const usernameInput = document.getElementById('username');
const usernameError = document.getElementById('usernameError');

usernameInput.addEventListener('input', function() {
    // Ottieni il valore attuale
    const value = this.value;
    
    // Verifica se soddisfa i nostri criteri
 	if (value.length < 5) {
        usernameInput.style.borderColor = "red";
      } else {
        usernameInput.style.borderColor = "green";
      }
});

Il bordo diventa rosso se il nome utente contiene meno di 5 caratteri e verde se è valido.

Sfida

Facile

Abbiamo una pagina con un campo di input per l’email. Al momento, non ne convalida il formato.

Il tuo compito è completare la riga all’interno del blocco <strong>if</strong> esistente in modo che:

Quando l’email contiene "@",
Il bordo del campo di input diventi "2px solid rgb(0, 250, 0)".

Provalo tu

<!DOCTYPE html>
<html>
<head>
    <title>Email Validation</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <form>
            <label for="email">Email:</label>
            <input type="text" id="email" placeholder="Enter your email">
        </form>
    </div>

    <script src="script.js"></script>
</body>
</html>