Semaine 3 - Jour 4 : Formulaires et Validation

Valider les formulaires côté client

Les formulaires sont essentiels pour collecter des données utilisateur. JavaScript permet de valider ces données en temps réel avant l'envoi au serveur, offrant une meilleure expérience utilisateur.

Applications concrètes : Inscription/connexion, formulaires de contact, validation d'email, vérification de mots de passe, messages d'erreur personnalisés...

Aujourd'hui : Récupérer les valeurs avec .value, valider les champs, afficher des messages d'erreur, et empêcher la soumission si le formulaire est invalide.

1. Récupérer les valeurs

Utiliser .value pour lire le contenu d'un champ de formulaire.

// Récupérer la valeur d'un input
let input = document.querySelector('#nom');
let valeur = input.value;
console.log(valeur);

// Récupérer la valeur d'un select
let select = document.querySelector('#pays');
console.log(select.value);

// Vérifier si une checkbox est cochée
let checkbox = document.querySelector('#accepte');
console.log(checkbox.checked); // true/false

// Modifier la valeur
input.value = 'Nouvelle valeur';

Démo interactive

2. Validation de base

Vérifier que les champs ne sont pas vides et respectent les formats attendus.

// Vérifier si un champ est vide
if (input.value.trim() === '') {
  console.log('Champ vide');
}

// Vérifier la longueur minimale
if (input.value.length < 3) {
  console.log('Minimum 3 caractères');
}

// Validation email simple
function validerEmail(email) {
  return email.includes('@') && email.includes('.');
}

// Validation avec regex
let regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
let valide = regex.test(email);

Démo interactive

Minimum 3 caractères

3. Messages d'erreur

Afficher des messages d'erreur personnalisés pour guider l'utilisateur.

// Afficher un message d'erreur
function afficherErreur(input, message) {
  let error = input.nextElementSibling;
  error.textContent = message;
  error.classList.add('show');
  input.classList.add('invalid');
}

// Masquer le message d'erreur
function masquerErreur(input) {
  let error = input.nextElementSibling;
  error.classList.remove('show');
  input.classList.remove('invalid');
  input.classList.add('valid');
}

Démo interactive

Email invalide

4. Empêcher la soumission

Utiliser event.preventDefault() pour bloquer la soumission si le formulaire est invalide.

form.addEventListener('submit', (event) => {
  // Empêcher l'envoi par défaut
  event.preventDefault();

  // Valider les champs
  let nom = document.querySelector('#nom').value;
  let email = document.querySelector('#email').value;

  if (nom === '' || email === '') {
    alert('Remplissez tous les champs');
    return; // Arrêter ici
  }

  // Si tout est OK, on peut envoyer
  console.log('Formulaire valide !');
});

Démo interactive

✅ Formulaire soumis avec succès !
Console JavaScript Interactive - Testez la validation !
Prêt à exécuter votre code...

Exemples pratiques - Formulaire d'inscription complet

// Formulaire d'inscription avec validation complète

let form = document.querySelector('#inscription');

form.addEventListener('submit', (event) => {
  event.preventDefault();

  // Récupérer les valeurs
  let nom = document.querySelector('#nom').value.trim();
  let email = document.querySelector('#email').value.trim();
  let mdp = document.querySelector('#mdp').value;
  let mdp2 = document.querySelector('#mdp2').value;

  // Validations
  let erreurs = [];

  if (nom.length < 3) {
    erreurs.push('Nom trop court (min 3 caractères)');
  }

  if (!email.includes('@') || !email.includes('.')) {
    erreurs.push('Email invalide');
  }

  if (mdp.length < 8) {
    erreurs.push('Mot de passe trop court (min 8 caractères)');
  }

  if (mdp !== mdp2) {
    erreurs.push('Les mots de passe ne correspondent pas');
  }

  // Afficher les erreurs ou soumettre
  if (erreurs.length > 0) {
    alert(erreurs.join('\\n'));
  } else {
    console.log('✅ Inscription réussie !');
    console.log({ nom, email });
  }
});

Testez ces exemples dans la console interactive ci-dessus !

Froggiesplaining :


Objectifs de ce cours :
✅ Récupérer les valeurs des champs avec .value
✅ Valider les données côté client
✅ Afficher des messages d'erreur personnalisés
✅ Empêcher la soumission si le formulaire est invalide
✅ Créer une expérience utilisateur fluide

Points clés à retenir :
• input.value : Récupérer/modifier la valeur d'un champ
• checkbox.checked : Vérifier si une case est cochée (true/false)
• value.trim() : Supprimer les espaces avant/après
• event.preventDefault() : Bloquer la soumission du formulaire
• Toujours valider côté client ET côté serveur
• Utiliser des classes CSS (invalid/valid) pour le feedback visuel
• Collecter toutes les erreurs avant d'afficher (meilleure UX)
• Les regex sont utiles pour les validations complexes (email, téléphone...)

Exercice pratique :
1. Créez un formulaire avec nom, email, âge
2. Validez que le nom fait au moins 3 caractères
3. Validez que l'email contient @ et un point
4. Validez que l'âge est un nombre entre 18 et 120
5. Affichez des messages d'erreur personnalisés
6. Bloquez la soumission si invalide avec preventDefault
7. Bonus : Ajoutez une validation de mot de passe avec confirmation
8. Bonus 2 : Validez en temps réel avec l'événement 'input'

Froggie explain

GitHub - eCrea