Étape 4 : JS - La Validation en Temps Réel

Nous allons coder des fonctions utilitaires pour gérer les erreurs et valider les données.

1. Sélecteurs et Event Listener

const form = document.getElementById('form');
const username = document.getElementById('username');
const email = document.getElementById('email');
const password = document.getElementById('password');
const password2 = document.getElementById('password2');

form.addEventListener('submit', (e) => {
    e.preventDefault(); // Empêche l'envoi réel du formulaire
    checkInputs(); // Lance notre batterie de tests
});

2. Fonctions d’état (SetError / SetSuccess)

Au lieu de répéter “ajoute la classe error, change le message, montre l’icône”, on crée des fonctions réutilisables.

function setError(input, message) {
    const formControl = input.parentElement; // Le div .form-control
    const small = formControl.querySelector('small');

    // Ajoute le message d'erreur
    small.innerText = message;

    // Ajoute la classe .error (le CSS fera le reste)
    formControl.className = 'form-control error';
}

function setSuccess(input) {
    const formControl = input.parentElement;
    formControl.className = 'form-control success';
}

3. Fonction technique : Email valide ?

Les regex (expressions régulières) font peur, mais c’est le standard pour valider un email.

function isEmail(email) {
    return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
        email,
    );
}

4. La validation principale : checkInputs

C’est ici qu’on écrit nos règles métier.

function checkInputs() {
    // .trim() enlève les espaces vides au début et à la fin
    const usernameValue = username.value.trim();
    const emailValue = email.value.trim();
    const passwordValue = password.value.trim();
    const password2Value = password2.value.trim();

    // 1. Username
    if (usernameValue === '') {
        setError(username, "Le nom d'utilisateur est requis");
    } else if (usernameValue.length < 3) {
        setError(username, 'Au moins 3 caractères');
    } else {
        setSuccess(username);
    }

    // 2. Email
    if (emailValue === '') {
        setError(email, "L'email est requis");
    } else if (!isEmail(emailValue)) {
        setError(email, 'Email invalide');
    } else {
        setSuccess(email);
    }

    // 3. Password
    if (passwordValue === '') {
        setError(password, 'Le mot de passe est requis');
    } else if (passwordValue.length < 6) {
        setError(password, 'Au moins 6 caractères');
    } else {
        setSuccess(password);
    }

    // 4. Confirm Password
    if (password2Value === '') {
        setError(password2, 'Confirmez le mot de passe');
    } else if (passwordValue !== password2Value) {
        setError(password2, 'Les mots de passe ne correspondent pas');
    } else {
        setSuccess(password2);
    }
}

---

Test

Remplissez le formulaire en faisant exprès de vous tromper.

• Mettez un nom trop court -> Rouge + Message.
• Mettez un email sans @ -> Rouge + Message.
• Mettez deux mots de passe différents -> Rouge + Message.
• Corrigez tout -> Tout devient Vert.

C’est la base de tout système d’authentification moderne !