Validation WIP

src/views/questions/ARE.vue

  <template>
-  <v-form>
+  <v-form @submit.prevent="submitARE" ref="formARE" v-model="validity" :lazy-validation="lazy">
     Quel est le montant de cette allocation ?
-    <v-text-field single-line type="number" label="Montant par mois"></v-text-field>
-    <QuestionButtons @submit="submit"></QuestionButtons>
+    <v-text-field
+      v-model.number="monthly_allocation_value"
+      autofocus
+      required
+      :rules="rules"
+      min="0"
+      type="number"
+      label="Montant par mois"
+    ></v-text-field>
+    <v-btn @click="back">Revenir</v-btn>
+    <v-btn v-bind:disabled="!validity" type="submit">Continuer</v-btn>
   </v-form>
 </template>
  
  <script>
-import QuestionButtons from "@/components/QuestionButtons";
 export default {
-  components: {
-    QuestionButtons
-  },
   name: "ARE",
+  created() {
+    this.monthly_allocation_value = this.$store.state.situation.monthly_allocation_value;
+  },
+  data: () => ({
+    monthly_allocation_value: null,
+    validity: false,
+    rules: [v => !!v || "doit être renseignée"]
+  }),
   methods: {
-    submit() {
+    validate() {
+      if (this.$refs.formARE.validate()) {
+        this.validity = true;
+      }
+    },
+    back() {
+      this.$router.go(-1);
+    },
+    submitARE() {
+      this.validate();
+      this.$store.dispatch("submitARE", this.monthly_allocation_value);
       this.$router.push("votre-age");
     }
   }

src/views/questions/Address.vue

@@ -4,18 +4,18 @@
     Code postal - facultatif
     **Plus que 2 questions avant d'obtenir vos résultats**
     <v-text-field single-line type="number" label="Exemple : 44220"></v-text-field>
-    <QuestionButtons @submit="submit"></QuestionButtons>
+    <v-btn @click="back">Revenir</v-btn>
+    <v-btn v-bind:disabled="!validity" type="submit">Continuer</v-btn>
   </v-form>
 </template>
  
  <script>
-import QuestionButtons from "@/components/QuestionButtons";
 export default {
-  components: {
-    QuestionButtons
-  },
   name: "Address",
   methods: {
+    back() {
+      this.$router.go(-1);
+    },
     submit() {
       //this.$store.dispatch("submitAddress", this.??);
       this.$router.push("autres-situations");

src/views/questions/Age.vue

  <template>
-  <v-form>
+  <v-form @submit.prevent="submitAge" ref="form" v-model="validity" :lazy-validation="lazy">
     Quel est votre âge ?
     <v-text-field
+      required
+      autofocus
       v-model.number="age"
-      single-line
       type="number"
-      v-validate="'required|min:16'"
-      :rules="rules"
+      min="0"
+      :rules="[rules.min]"
     ></v-text-field>
-    <QuestionButtons @submit="submit"></QuestionButtons>
+    <v-btn @click="back">Revenir</v-btn>
+    <v-btn v-bind:disabled="!validity" type="submit">Continuer</v-btn>
   </v-form>
 </template>
  
  <script>
-import QuestionButtons from "@/components/QuestionButtons";
 export default {
   name: "Age",
-  components: {
-    QuestionButtons
-  },
-  computed: {
-    age: {
-      get() {
-        return this.$store.state.situation.age;
-      },
-      set(value) {
-        this.$store.dispatch("submitAge", value);
-      }
-    }
+  created() {
+    this.age = this.$store.state.situation.age;
   },
   data: () => ({
-    rules: [
-      value => !!value || "Required."
-      // value => value || >= 15 || 'doit être supérieur ou égal à 16',
-      // value => {
-      //   const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
-      //   return pattern.test(value) || 'Invalid e-mail.'
-      //},
-    ]
+    age: 0,
+    validity: false,
+    rules: {
+      min: v => v >= 16 || "doit être supérieur ou égal à 16"
+    }
   }),
   methods: {
-    submit() {
-      //this.$store.dispatch("submitAge", this.age);
+    validate() {
+      if (this.$refs.form.validate()) {
+        this.validity = true;
+      }
+    },
+    back() {
+      this.$router.go(-1);
+    },
+    submitAge() {
+      this.validate();
+      this.$store.dispatch("submitAge", this.age);
       this.$router.push("votre-diplome");
     }
   }

src/views/questions/Allocation.vue

@@ -9,16 +9,13 @@
       <v-radio label="Choix 5" value="radio-5"></v-radio>
       <v-radio label="Choix 6" value="radio-6"></v-radio>
     </v-radio-group>
-    <QuestionButtons @submit="submit"></QuestionButtons>
+    <v-btn @click="back">Revenir</v-btn>
+    <v-btn v-bind:disabled="!validity" type="submit">Continuer</v-btn>
   </v-form>
 </template>