Validation des saisies

Fait partie de la section JavaScript in Action du Journey HTML de Coddy — leçon 5 sur 27.

Lors de la création de formulaires, il est important de donner aux utilisateurs un retour immédiat au fur et à mesure de leur saisie, afin qu'ils ne soumettent pas d'informations incorrectes. C'est ce qu'on appelle la validation en temps réel.

Tout d'abord, créons un champ de saisie de texte simple. Nous voulons vérifier si la longueur du nom d'utilisateur est d'au moins 5 caractères.

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

Maintenant, ajoutez un écouteur d'événements 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() {
    // Get the current value
    const value = this.value;
    
    // Check if it meets our criteria
 	if (value.length < 5) {
        usernameInput.style.borderColor = "red";
      } else {
        usernameInput.style.borderColor = "green";
      }
});

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

Défi

Facile

Nous avons une page avec un champ de saisie d'e-mail. Actuellement, il ne valide pas le format de l'e-mail.

Votre tâche est de compléter la ligne à l'intérieur du bloc <strong>if</strong> existant de sorte que :

Lorsque l'e-mail contient "@",
La bordure de l'élément input 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>