Tutoriel : Valider un formulaire avec JavaScript

Pourquoi valider côté client ?

La validation JavaScript améliore l’expérience utilisateur en signalant les erreurs instantanément, avant l’envoi au serveur. Attention : la validation côté serveur reste obligatoire pour la sécurité.

Validation HTML5 native (le minimum)

<form id="inscription">
    <input type="text" name="nom" required minlength="2" maxlength="50"
           placeholder="Votre nom">
    
    <input type="email" name="email" required
           placeholder="votre@email.com">
    
    <input type="tel" name="telephone" 
           pattern="[0-9]{9,12}" placeholder="771234567">
    
    <input type="password" name="motdepasse" required minlength="8"
           placeholder="Mot de passe (8 caractères min)">
    
    <button type="submit">S'inscrire</button>
</form>

Les attributs required, minlength, pattern et type="email" font déjà beaucoup de travail sans JavaScript !

Validation JavaScript personnalisée

const form = document.getElementById('inscription');

form.addEventListener('submit', function(e) {
    // Empêcher l'envoi si invalide
    e.preventDefault();
    
    // Récupérer les valeurs
    const nom = form.nom.value.trim();
    const email = form.email.value.trim();
    const tel = form.telephone.value.trim();
    const mdp = form.motdepasse.value;
    
    // Tableau d'erreurs
    const erreurs = [];
    
    // Validation du nom
    if (nom.length < 2) {
        erreurs.push('Le nom doit contenir au moins 2 caractères');
    }
    
    // Validation email avec regex
    const regexEmail = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    if (!regexEmail.test(email)) {
        erreurs.push('Adresse email invalide');
    }
    
    // Validation téléphone sénégalais
    const regexTel = /^(70|75|76|77|78)[0-9]{7}$/;
    if (tel && !regexTel.test(tel)) {
        erreurs.push('Numéro de téléphone invalide (format : 77XXXXXXX)');
    }
    
    // Validation mot de passe robuste
    if (mdp.length < 8) {
        erreurs.push('Le mot de passe doit contenir au moins 8 caractères');
    }
    if (!/[A-Z]/.test(mdp)) {
        erreurs.push('Le mot de passe doit contenir une majuscule');
    }
    if (!/[0-9]/.test(mdp)) {
        erreurs.push('Le mot de passe doit contenir un chiffre');
    }
    
    // Afficher les erreurs ou soumettre
    if (erreurs.length > 0) {
        afficherErreurs(erreurs);
    } else {
        form.submit(); // Tout est OK, on envoie
    }
});

Afficher les erreurs de manière visuelle

function afficherErreurs(erreurs) {
    // Supprimer les anciens messages
    document.querySelectorAll('.erreur').forEach(el => el.remove());
    document.querySelectorAll('.champ-erreur').forEach(el => {
        el.classList.remove('champ-erreur');
    });
    
    erreurs.forEach(erreur => {
        const div = document.createElement('div');
        div.className = 'erreur';
        div.textContent = '⚠️ ' + erreur;
        form.insertBefore(div, form.querySelector('button'));
    });
}

// CSS pour les erreurs
const style = document.createElement('style');
style.textContent = `
    .erreur {
        background: #ffebee;
        color: #c62828;
        padding: 10px 15px;
        border-radius: 5px;
        margin: 5px 0;
        border-left: 4px solid #c62828;
        font-size: 14px;
    }
    .champ-erreur {
        border: 2px solid #c62828 !important;
        background: #fff5f5;
    }
    input:valid { border: 2px solid #4caf50; }
    input:focus:invalid { border: 2px solid #ff9800; }
`;
document.head.appendChild(style);

Validation en temps réel (pendant la saisie)

// Valider chaque champ pendant la saisie
form.email.addEventListener('input', function() {
    const regexEmail = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    
    if (this.value === '') {
        this.style.borderColor = '#ddd';
    } else if (regexEmail.test(this.value)) {
        this.style.borderColor = '#4caf50'; // Vert = valide
        supprimerErreur(this);
    } else {
        this.style.borderColor = '#f44336'; // Rouge = invalide
    }
});

// Indicateur de force du mot de passe
form.motdepasse.addEventListener('input', function() {
    const mdp = this.value;
    let force = 0;
    
    if (mdp.length >= 8) force++;
    if (mdp.length >= 12) force++;
    if (/[A-Z]/.test(mdp)) force++;
    if (/[0-9]/.test(mdp)) force++;
    if (/[^A-Za-z0-9]/.test(mdp)) force++;
    
    const barre = document.getElementById('force-mdp');
    const niveaux = ['Très faible', 'Faible', 'Moyen', 'Fort', 'Très fort'];
    const couleurs = ['#f44336', '#ff9800', '#ffeb3b', '#8bc34a', '#4caf50'];
    
    barre.style.width = (force * 20) + '%';
    barre.style.background = couleurs[force - 1] || '#eee';
    barre.textContent = niveaux[force - 1] || '';
});

Regex utiles pour la validation

Exercice pratique