✨ Story 5.2: validation JS contact

docs/stories/5.2.validation-javascript.md

@@ -2,7 +2,7 @@
 
 ## Status
 
-Ready for Dev
+review
 
 ## Story
 
@@ -21,29 +21,29 @@ Ready for Dev
 
 ## Tasks / Subtasks
 
-- [] **Task 1 : Créer le validateur de formulaire** (AC: 6)
-  - [] Créer `assets/js/contact-form.js`
-  - [] Classe ou objet `FormValidator`
-  - [] Méthodes de validation par type de champ
+- [x] **Task 1 : Créer le validateur de formulaire** (AC: 6)
+  - [x] Créer `assets/js/contact-form.js`
+  - [x] Classe ou objet `FormValidator`
+  - [x] Méthodes de validation par type de champ
 
-- [] **Task 2 : Implémenter la validation au blur** (AC: 1)
-  - [] Écouter l'événement `blur` sur chaque champ
-  - [] Valider le champ concerné
-  - [] Afficher/masquer l'erreur
+- [x] **Task 2 : Implémenter la validation au blur** (AC: 1)
+  - [x] Écouter l'événement `blur` sur chaque champ
+  - [x] Valider le champ concerné
+  - [x] Afficher/masquer l'erreur
 
-- [] **Task 3 : Implémenter la validation à la soumission** (AC: 1)
-  - [] Écouter l'événement `submit`
-  - [] Valider tous les champs
-  - [] Empêcher l'envoi si erreurs
+- [x] **Task 3 : Implémenter la validation à la soumission** (AC: 1)
+  - [x] Écouter l'événement `submit`
+  - [x] Valider tous les champs
+  - [x] Empêcher l'envoi si erreurs
 
-- [] **Task 4 : Afficher les erreurs** (AC: 2, 3, 4)
-  - [] Message sous le champ (data-error)
-  - [] Bordure rouge sur le champ (classes Tailwind)
-  - [] Messages clairs et actionnables
+- [x] **Task 4 : Afficher les erreurs** (AC: 2, 3, 4)
+  - [x] Message sous le champ (data-error)
+  - [x] Bordure rouge sur le champ (classes Tailwind)
+  - [x] Messages clairs et actionnables
 
-- [] **Task 5 : Gérer l'état du bouton** (AC: 5)
-  - [] Désactiver si erreurs
-  - [] Réactiver quand tout est valide
+- [x] **Task 5 : Gérer l'état du bouton** (AC: 5)
+  - [x] Désactiver si erreurs
+  - [x] Réactiver quand tout est valide
 
 ## Dev Notes
 
@@ -320,25 +320,28 @@ document.addEventListener('DOMContentLoaded', () => {
 ## Dev Agent Record
 
 ### Agent Model Used
-Claude Opus 4.5 (claude-opus-4-5-20251101)
+GPT-5 Codex
+
+### Implementation Plan
+- Implémenter les tâches 1 à 5 dans l’ordre avec tests à chaque étape.
+- Mettre à jour le formulaire pour les hooks JS (data-error, id submit).
 
 ### File List
 | File | Action | Description |
 |------|--------|-------------|
 | `assets/js/contact-form.js` | Created | Classe FormValidator avec validation complète |
-| `pages/contact.php` | Modified | Lien vers le script JS, classes Tailwind pour erreurs |
+| `pages/contact.php` | Modified | Hooks JS (data-error, submit-btn, script) |
+| `tests/contact-validation.test.php` | Added | Tests du validateur JS (présence/méthodes) |
+| `tests/contact.test.php` | Modified | Vérifications markup contact + data-error |
+| `tests/run.ps1` | Modified | Ajout du test contact-validation |
 
 ### Completion Notes
-- Classe FormValidator en JavaScript vanilla (pas de dépendances)
-- Validation au blur et à la soumission
-- Messages d'erreur sous chaque champ avec data-error
-- Bordure rouge sur les champs invalides (classes Tailwind)
-- Bouton submit désactivé si erreurs (updateSubmitButton)
-- Compteur de caractères en temps réel
-- Focus automatique sur le premier champ en erreur
-- Validation email avec regex
-- Événement 'validSubmit' dispatché quand tout est valide
-- Gestion du reset du formulaire
+- Task 1 : classe FormValidator et règles de validation mises en place (JS vanilla)
+- Task 2 : validation au blur + gestion des erreurs champ par champ
+- Task 3 : validation à la soumission et blocage si erreurs
+- Task 4 : messages d'erreur + bordures invalides configurés
+- Task 5 : désactivation/réactivation du bouton d'envoi
+- Tests : `powershell -ExecutionPolicy Bypass -File tests/run.ps1`
 
 ### Debug Log References
 Aucun problème rencontré.
@@ -349,3 +352,4 @@ Aucun problème rencontré.
 |------|---------|-------------|--------|
 | 2026-01-22 | 0.1 | Création initiale | Sarah (PO) |
 | 2026-01-24 | 1.0 | Implémentation complète | James (Dev) |
+| 2026-02-04 | 1.1 | Validation JS côté client | Amelia (Dev) |