Validation de formulaire

1. 420-B63 Programmation Web Avancée Auteur : Frédéric Thériault Validation de formulaire

2. But du laboratoire • Afin de limiter la bande passante sur la page d’accueil du site Web LinkedIn, on vous a demandé de faire la validation du formulaire côté client (en JavaScript) du formulaire d’inscription

3. Spécification & règlesd’affaires • Le champ date de naissance est limité dans son choix de valeurs. Il faut donc en JavaScript construire les options : • Le champ jour doit avoir les options 1 à 31 • Le champ mois doit contenir les options 1 à 12 • Le champ année doit contenir les options 1900 à 2000 - document.write est la solution ;)

4. Spécification & règlesd’affaires • Lorsque le formulaire est « soumis », il doit être validé avant d’être envoyé. • Les champs nom et prénom • Doit accepter seulement les lettres a-z (pas besoin de tester les accents, apostrophes, …) • Ces champs sont obligatoires et doivent avoir entre 2 et 20 caractères maximum

5. Spécification & règlesd’affaires • Le champ courriel • Estobligatoire • Doitcontenir le caractère @ • Doit contenir au moins un . (point), mais celui-ci doit être positionné au moins une lettre après le @ et doit contenir au moins 2 lettres après. • Le courriel ne peut commencer avec la lettre @

6. Spécification & règlesd’affaires • Le mot de passe • Estobligatoire • Doit contenir au moins 6 lettres

7. Spécification & règlesd’affaires • Pour les champs prénom/nom du formulaire de recherche • Chaque champ est optionnel, mais s’il est rempli, doit répondre aux mêmes exigences que les champs nom/prénom du formulaire d’inscription • Lorsque le « focus » est placé sur le champ, alors le mot « nom » ou « prénom » est supprimé. • Cependant, si le mot n’est pas « nom » ou « prénom », alors ne pas supprimer

8. Spécification & règlesd’affaires • Lorsqu’un formulaire n’est pas valide lors de la soumission du formulaire, alors une boîte d’alerte (alert) avec les erreurs doit être affichée à l’écran.

9. Mémo • N’hésitez pas à vous servir de la fonction document.getElementById() • Exemple : varvaleurDuChamp = document.getElementById(‘idDuChamp’).value;