add error message and city validation to contact form

components/Contact/Form.vue

@@ -68,7 +68,8 @@
           <v-col cols="12" md="6">
             <v-text-field
               v-model="contactRequest.city"
-              label="Ville"
+              label="Ville*"
+              :rules="[validateCity]"
             />
           </v-col>
         </v-row>
@@ -182,6 +183,10 @@
             Envoyer
           </v-btn>
         </div>
+
+        <div v-if="errorMsg" class="error">
+          {{ errorMsg }}
+        </div>
       </v-container>
 
       <div class="legal">
@@ -249,6 +254,8 @@ const validateSurname = (surname: string | null) => !!surname || "Le prénom est
 const validatePostalCode = (postalCode: string | null) =>
   (!!postalCode && /^\d{5}$/.test(postalCode)) || "Le code postal doit être valide";
 
+const validateCity = (city: string | null) => !!city || "La ville est obligatoire";
+
 const validateEmail = (email: string | null) =>
   (!!email && /.+@.+\..+/.test(email)) || "L'adresse e-mail doit être valide";
 
@@ -268,6 +275,8 @@ const validateMessageLength = (message: string | null) =>
 
 const contactRequestSent: Ref<boolean> = ref(false);
 
+const errorMsg: Ref<string | null> = ref(null)
+
 /**
  * Submits the contact form.
  *
@@ -285,9 +294,15 @@ const submit = async (): Promise<void> => {
     return
   }
 
-  await em.persist(ContactRequest, contactRequest)
+  try {
+    await em.persist(ContactRequest, contactRequest)
+  } catch (e) {
+    errorMsg.value = "Une erreur s'est produite, nous sommes navrés pour le désagrément. Veuillez réessayer plus tard."
+    return
+  }
 
   contactRequestSent.value = true;
+  errorMsg.value = null
 
   // Défile vers le début de page pour afficher le message de confirmation
   setTimeout(
@@ -353,14 +368,21 @@ const submit = async (): Promise<void> => {
     font-weight: 600;
   }
 
+  .error {
+    color: red;
+    width: 80%;
+    margin: 0 auto 2em;
+    text-align: center;
+  }
+
   .legal {
     opacity: 0.7;
-
-    @media (max-width: 600px) {
-      max-width: 80%;
-      margin-left: auto;
-      margin-right: auto;
-    }
+    font-size: 14px;
+    font-style: italic;
+    text-align: justify;
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 80%;
   }
 }