Validation des entrées

Fait partie de la section JavaScript en action du Journey HTML de Coddy. Leçon 5 sur 27.

Lors de la création de formulaires, il est important de fournir aux utilisateurs un retour immédiat pendant qu’ils saisissent leurs informations, afin qu’ils ne soumettent pas d’informations incorrectes. C’est ce qu’on appelle la validation en temps réel.

Commençons par créer un champ de saisie de texte de base. Nous voulons vérifier si le nom d’utilisateur comporte au moins 5 caractères.

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

Maintenant, ajoutez un écouteur d’événement pour valider la saisie au fur et à mesure que l’utilisateur tape :

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

usernameInput.addEventListener('input', function() {
    // Récupérer la valeur actuelle
    const value = this.value;
    
    // Vérifier si elle répond à nos critères
 	if (value.length < 5) {
        usernameInput.style.borderColor = "red";
      } else {
        usernameInput.style.borderColor = "green";
      }
});

La bordure devient rouge si le nom d’utilisateur comporte moins de 5 caractères et verte s’il est valide.

Défi

Facile

Nous avons une page avec un champ de saisie d’adresse e-mail. Actuellement, le format de l’adresse e-mail n’est pas validé.

Ta tâche consiste à compléter la ligne à l’intérieur du bloc if existant afin que :

Lorsque l’adresse e-mail contient "@",
La bordure du champ de saisie devienne "2px solid rgb(0, 250, 0)".

Essayez vous-même

<!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>