Examen 2 - Révision B
Consignes
- Vous avez droit à toutes vos notes et Internet.
- Aucune communication n'est permise (messagerie, courriel, etc.). Un élève pris en flagrant délit se verra attribuer la note de 0 pour plagiat.
- La durée de l'examen est de 1h50.
- Une fois l’examen terminé, vous devez faire un commit avec le message "Remise finale" et faire un push de votre dépôt pour le synchroniser avec GitHub.
- Il est de votre devoir de vous assurer que tous les fichiers sont inclus dans le commit. Je vais valider que le commit et la synchronisation avec Github a bien été faite mais pas le contenu de votre projet. Aucun fichier ne sera accepté une fois que vous aurez quitté le lieu de l'examen.
Directives Générales
Cliquez sur le lien Github classroom que je vais vous fournir et clonez le dépôt créé sur votre portable. Répondez de votre mieux aux points suivants et une fois terminé faites un commit et un push de votre dépôt cloné.
Toutes les validations doivent être faites en javascript. Il n'est pas nécessaire d'ajouter une validation dans les balises html de la page comme ajouter par exemple required à une balise dont on ne veut pas qu'elle soit "vide".
Point #1 - Envoi du formulaire (10 points)
Configurez le formulaire pour qu'il envoie les données du formulaire de la façon suivante :
- Les données seront envoyées à l'adresse suivante :
- La méthode d'envoie sera par requête POST
Point #2 - Validation du code de produit (40 points)
Faites les validations suivantes en Javascript sur la valeur saisie dans la zone de texte du code de produit.
- Le code de produit doit être sous le format #####-#####-##### ou #####-#####-#####-#####-##### (# correspond à un chiffre de 0 à 9 ou une lettre de a à z en majuscule ou minuscule). Dans le fichier script.js je vous fournis une constante REGEX_CODE_PRODUIT qui contient l'expression régulière pour confirmer le code de produit.
- Le code du produit doit exister dans le tableau listeProduits qui est déjà dans le fichier script.js.
La validation sera faite quand l'usager cliquera sur le bouton "Activer", donc quand le formulaire sera soumis. Si le code de produit n'est pas conforme, affichez le message d'erreur correspondant dans la balise div qui porte le id message-erreur. Cette balise est masqué par défaut et ne devra être visible que si un message d'erreur est affiché. Les messages d'erreurs sont contenu dans le tableau erreurValidation qui se retrouve dans le fichier script.js
- Si le format est invalide, afficher le message "Le code produit que vous avez saisie est invalide, il ne respecte pas le format requis.".
- Si le code produit est inexistant, afficher le message "Aucun produit n'est associé au code de produit saisie.".
Point #3 - Validation finale du formulaire (50 points)
La validation du formulaire se fera lors de l'événement submit du formulaire qui est déclenché lors d'un clique sur le bouton "Activer".
- Reliez une fonction Javascript au formulaire lorsque l'événement submit du formulaire est déclenché. Les différentes validations ainsi que l'envoie ou non du formulaire se feront dans cette fonction.
- La section qui affiche le message d'erreur doit être réinitialisée (le texte doit être supprimé) et masquée au début de la fonction.
- Si le format du code de produit est invalide ou que le code de produit est inexistant dans le tableau listeProduits, empêchez la transmission du formulaire.
- Si la case "J'accepte les termes de ..." n'est pas cochée, affichez dans la div message-erreur le message d'erreur "Vous devez accepter les termes de l’Accord de souscription Vapeur pour finaliser la transaction." et empêchez la transmission du formulaire. Le texte de la case à cocher doit aussi changer de couleur. Le code de la couleur est dans la variable --couleur-texte-invalide qui est dans le fichier style.css
Grille de correction
| ÉlÉments | Critères | Points |
|---|---|---|
| Point 1 - Envoi du formulaire | /10 | |
| Les données sont envoyées à la bonne adresse. | 5 | |
| Les données sont envoyées selon la bonne méthode. | 5 | |
| Point 2 - Validation du code | /40 | |
| Le code de produit respecte le format requis. | 10 | |
| Le code de produit correspond à un produit du tableau listeProduits | 10 | |
| La fonction de validation est lancé lorsqu'on clique sur le bouton "Activer". | 10 | |
| Le bon message d'erreur s'affiche dans la section demandée quand le format du code produit est invalide. | 5 | |
| Le bon message d'erreur s'affiche dans la section demandée quand le produit est inexistant. | 5 | |
| Point 4 - Validation du formulaire | /50 | |
| La fonction de validation est appelée en javascript depuis l'événement submit. | 15 | |
| La case "J'ai bien lu la déclaration ci-dessus" doit être coché pour que le formulaire soit soumis. | 10 | |
| Le texte de la case à cocher change pour la bonne couleur si celle-ci n'est pas cochée quand le formulaire est soumis. | 5 | |
| Le formulaire n'est pas envoyé si au moins une des validations échoues. | 20 | |
| Total | /100 |