Étape 2 : HTML - La logique des états

Pourquoi avoir mis autant de choses dans chaque .form-control ?

<div class="form-control">
    <label>...</label>
    <input ... />
    <i class="fas fa-check-circle"></i>
    <!-- Icône Succès (Vert) -->
    <i class="fas fa-exclamation-circle"></i>
    <!-- Icône Erreur (Rouge) -->
    <small>Message d'erreur</small>
</div>

Notre stratégie JavaScript sera d’ajouter des classes CSS sur le parent .form-control :

• .form-control.success : Affichera l’icône verte.
• .form-control.error : Affichera l’icône rouge ET le message <small>.

C’est une technique très robuste pour gérer l’interface. Au lieu de manipuler chaque petit élément individuellement en JS, on change juste l’état du parent, et le CSS fait le reste.

Les Champs

1. Username : Doit faire au moins 3 caractères.
2. Email : Doit être un email valide (regex).
3. Password : Au moins 6 caractères.
4. Confirm Password : Doit être identique au Password.

C’est ce qu’on appelle la Validation Côté Client. C’est instantané pour l’utilisateur, mais rappelez-vous qu’il faut TOUJOURS revérifier côté serveur (PHP, Node…) pour la sécurité. Ici, on se concentre sur l’UX (Expérience Utilisateur).