# Formulaire et carte

## Énoncé

Téléchargez les fichiers de départ de l’exercice : exercice-3-formulaire-et-carte.zip

## Affichage d’une carte interactive

Une div `<div class="map" id="mapId"></div>` est déjà présente dans le fichier HTML.

L’objectif est d’afficher une carte interactive à l’intérieur.

Pour cela, aidez-vous de la documentation en ligne suivante : https://www.datavis.fr/maps/leaflet-firstmap

La documentation complète de la librairie est accessible ici : https://leafletjs.com/ mais vous ne devriez pas en avoir besoin pour cet exercice.

1. Affichez une carte à n’importe quelles coordonnées dans la div `<div class="map" id="mapId"></div>`
2. Centrez la carte sur Sud-Management ou n’importe quel endroit de votre choix.
   - Différentes solutions pour obtenir les coordonnées GPS d’un point :
     - passer par Google Map et faire un clic droit sur la carte.
     - passer par https://www.openstreetmap.org et faire clic droit > afficher l’adresse.
     - https://www.gps-coordinates.net/
3. Ajoutez un pointeur (marker) sur l’adresse que vous avez choisi.

## Validation du formulaire

1. Interceptez l’envoi du formulaire pour pouvoir le valider.

   - par exemple en affichant une alerte ou un console.log

2. Validation du champ nom

   - ne doit pas être vide
   - doit faire au moins trois caractères
   - Si le champ est valide :
     - On met sa bordure en vert
   - Si le champ est invalide :
     - On met sa bordure en rouge
     - On affiche un message d’erreur dans la div `<div id="erreur-name"></div>`

3. Validation du champ mail

   - ne doit pas être vide
   - doit être conforme à la regex `/[a-zA-Z0-9._]*@[a-zA-Z0-9-]*\.[a-z]*/gm`
   - même comportement en cas de validation ou d’erreur que pour le champ name.

4. Validation du champ phone

   - peut être vide.
   - s’il est rempli, il doit être conforme à la regex `/^(?:(?:\+|00)33|0)\s*[1-9](?:[\s.-]*\d{2}){4}$/`
   - s’il est invalide : border rouge + message
   - s’il est vide : bordure lightgrey, pas de message
   - s’il est valide : bordure verte

5. Validation du champ subject

   - ne doit pas être vide
   - doit faire entre 20 et 255 caractères
   - même comportement en cas de validation ou d’erreur que pour le champ name.

6. Vérifiez que le formulaire n’est pas envoyé si un champ présente une erreur.