Convalida dell'input

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

Quando crei dei moduli, è importante fornire agli utenti un feedback immediato mentre digitano, così non inviano informazioni errate. Questo si chiama convalida in tempo reale.

Per prima cosa, creiamo un campo di input di testo di base. Vogliamo verificare che il nome utente abbia 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 corrente
    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 verifica il formato dell'email.

Il tuo compito è completare la riga all'interno del blocco if esistente in modo che:

Quando l'email contiene "@",
Il bordo dell'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>