From 30a271249c6437a4af1977f02638b9d6c16d84b8 Mon Sep 17 00:00:00 2001
From: Matthieu Bessat <spamfree@matthieubessat.fr>
Date: Tue, 4 Aug 2020 23:49:25 +0200
Subject: [PATCH] fix: better validation on Contact form

---
 src/views/Delegate/Contact.vue | 73 ++++++++++++++++++++--------------
 1 file changed, 43 insertions(+), 30 deletions(-)

diff --git a/src/views/Delegate/Contact.vue b/src/views/Delegate/Contact.vue
index e5cd458..e06978f 100644
--- a/src/views/Delegate/Contact.vue
+++ b/src/views/Delegate/Contact.vue
@@ -7,42 +7,51 @@
       >
         Ici vous pouvez préciser quelques manières de contacter votre association, aucun des  champs indiqués n'est obligatoire.
       </v-alert>
+      <v-alert
+        v-if="!formValid"
+        dense
+        type="error"
+      >
+        Attention ! Certains des champs renseignés sont invalides !
+      </v-alert>
     </div>
     <!-- <v-text-field
       prepend-icon="call"
       label="Numéro de téléphone"
       outlined
       v-model="$store.state.data.contacts.phone" /> -->
-    <v-text-field
-      prepend-icon="public"
-      label="Site web"
-      outlined
-      :rules="rules.website"
-      v-model="$store.state.data.contacts.website" />
-    <v-textarea
-      prepend-icon="room"
-      label="Adresse"
-      outlined
-      v-model="$store.state.data.contacts.address"
-      :rules="rules.address" />
-    <v-text-field
-      prepend-icon="$vuetify.icons.facebook"
-      label="Compte facebook"
-      outlined
-      v-model="$store.state.data.contacts.facebook"
-      :rules="rules.facebook" />
-    <v-text-field
-      prepend-icon="$vuetify.icons.twitter"
-      label="Compte twitter"
-      outlined
-      v-model="$store.state.data.contacts.twitter"
-      :rules="rules.twitter" />
-    <v-text-field
-      prepend-icon="$vuetify.icons.instagram"
-      label="Compte instagram"
-      outlined
-      v-model="$store.state.data.contacts.instagram"
-      :rules="rules.instagram" />
+    <v-form v-model="formValid" ref="form">
+      <v-text-field
+        prepend-icon="public"
+        label="Site web"
+        outlined
+        :rules="rules.website"
+        v-model="$store.state.data.contacts.website" />
+      <v-textarea
+        prepend-icon="room"
+        label="Adresse"
+        outlined
+        v-model="$store.state.data.contacts.address"
+        :rules="rules.address" />
+      <v-text-field
+        prepend-icon="$vuetify.icons.facebook"
+        label="Compte facebook"
+        outlined
+        v-model="$store.state.data.contacts.facebook"
+        :rules="rules.facebook" />
+      <v-text-field
+        prepend-icon="$vuetify.icons.twitter"
+        label="Compte twitter"
+        outlined
+        v-model="$store.state.data.contacts.twitter"
+        :rules="rules.twitter" />
+      <v-text-field
+        prepend-icon="$vuetify.icons.instagram"
+        label="Compte instagram"
+        outlined
+        v-model="$store.state.data.contacts.instagram"
+        :rules="rules.instagram" />
+    </v-form>
     <AdditionalContacts />
     <!-- <v-card
       v-for="(contact, index) in $store.state.data.contacts.peoples"
@@ -92,7 +101,11 @@ export default {
   components: {
     AdditionalContacts
   },
+  mounted () {
+    this.$refs.form.validate()
+  },
   data: () => ({
+    formValid: false,
     rules: {
       website: [
         v => v === '' || /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w.-]+)+[\w\-._~:/?#[\]@!$&'()*+,;=.]+$/gm.test(v) || "L'adresse web doit être valide"