Chapitre 12 – Formulaires et validations

1) Client vs serveur : qui valide quoi ?

Il y a deux niveaux de validation :

• Côté client (jQuery/JS) : rapide, améliore l’UX, évite des requêtes inutiles.
• Côté serveur (PHP/Node/etc.) : obligatoire, car le client peut être contourné.

2) Intercepter la soumission : submit + preventDefault()

Par défaut, un formulaire recharge la page. Pour gérer la validation en JS, on bloque ce comportement.

$(function(){
  $('#form').on('submit', function(e){
    e.preventDefault(); // empêche le reload
    console.log('On valide puis on envoie (ou pas).');
  });
});

3) Récupérer les valeurs : val() + trim()

Le réflexe pro : convertir en string et enlever les espaces.

const email = String($('#email').val()).trim();
const password = String($('#password').val()).trim();

4) Validation “simple” (débutant) : présence + format email

On va commencer par des règles faciles :

• Email requis
• Email au bon format
• Mot de passe requis
• Mot de passe min 6 caractères

function isValidEmail(email){
  // regex simple (pas parfaite, mais ok pour débuter)
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

5) Afficher des erreurs (UX) : messages et classes CSS

Une bonne UX :

• Explique clairement l’erreur
• Montre où corriger
• Évite de spammer l’utilisateur avec 10 alert()

Pattern recommandé : un message global + un message par champ + une classe d’état (has-error).

function setFieldError($field, message){
  $field.addClass('has-error');
  $field.next('.field-error').text(message);
}

function clearFieldError($field){
  $field.removeClass('has-error');
  $field.next('.field-error').text('');
}

6) Exemple complet : formulaire de connexion validé

Exemple réaliste : on valide, on affiche les erreurs, sinon on “simule” l’envoi.

<form id="loginForm">
  <label>Email</label>
  <input id="email" type="email">
  <div class="field-error"></div>

  <label>Mot de passe</label>
  <input id="password" type="password">
  <div class="field-error"></div>

  <button type="submit">Se connecter</button>
</form>

<p id="message"></p>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  function isValidEmail(email){
    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
  }

  function setFieldError($field, message){
    $field.addClass('has-error');
    $field.next('.field-error').text(message);
  }

  function clearFieldError($field){
    $field.removeClass('has-error');
    $field.next('.field-error').text('');
  }

  $(function(){
    $('#loginForm').on('submit', function(e){
      e.preventDefault();

      const $email = $('#email');
      const $password = $('#password');

      const email = String($email.val()).trim();
      const password = String($password.val()).trim();

      // Reset UI erreurs
      clearFieldError($email);
      clearFieldError($password);
      $('#message').text('');

      let ok = true;

      if(!email){
        setFieldError($email, 'Email requis.');
        ok = false;
      } else if(!isValidEmail(email)){
        setFieldError($email, 'Format email invalide.');
        ok = false;
      }

      if(!password){
        setFieldError($password, 'Mot de passe requis.');
        ok = false;
      } else if(password.length < 6){
        setFieldError($password, 'Mot de passe trop court (min 6).');
        ok = false;
      }

      if(!ok){
        $('#message').text('Merci de corriger le formulaire.');
        return;
      }

      // Ici : on enverrait en AJAX (chapitre 11)
      $('#message').text('Validation OK. Envoi (simulation).');
    });
  });
</script>

7) Validation “en direct” (input / blur)

UX avancée : valider au fur et à mesure, sans attendre submit. Deux approches :

• input : dès que l’utilisateur tape
• blur : quand il quitte le champ

$(function(){
  $('#email').on('blur', function(){
    const email = String($(this).val()).trim();
    if(!email){
      $(this).addClass('has-error');
    } else {
      $(this).removeClass('has-error');
    }
  });
});

8) Préparer l’envoi : serialize()

serialize() transforme un formulaire en chaîne URL-encodée : pratique pour l’envoyer en AJAX.

$('#form').on('submit', function(e){
  e.preventDefault();
  const payload = $(this).serialize();
  console.log(payload); // ex: "email=test%40mail.com&password=123456"
});

9) Checklist “pro” pour un formulaire

• Champs ont des name corrects
• Validation côté client simple + messages clairs
• Validation côté serveur obligatoire
• Bloquer l’envoi double (désactiver bouton pendant l’envoi)
• Retour utilisateur : loading / succès / erreur

Exercice – Formulaire d’inscription validé

Crée un formulaire avec :

1. Pseudo (min 3)
2. Email (format valide)
3. Mot de passe (min 8)
4. Confirmation mot de passe (doit correspondre)
5. Checkbox CGU obligatoire

// Pseudo : length >= 3
// Email : regex simple
// Password : length >= 8
// Confirm : confirm === password
// CGU : $('#cgu').prop('checked')

Résumé du chapitre

• Intercepter le formulaire : submit + preventDefault()
• Lire les champs : val() + trim()
• Afficher des erreurs : messages clairs + classes CSS
• Valider en direct (optionnel) : input / blur
• Préparer l’envoi AJAX : serialize()