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>
  
  <script>
-import QuestionButtons from "@/components/QuestionButtons";
 export default {
-  components: {
-    QuestionButtons
-  },
   name: "Allocation",
   methods: {
     submit() {

src/views/questions/Category.vue

@@ -5,16 +5,13 @@
       <v-radio label="Choix 1" value="radio-1"></v-radio>
       <v-radio label="Choix 2" value="radio-2"></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>
  
  <script>
-import QuestionButtons from "@/components/QuestionButtons";
 export default {
-  components: {
-    QuestionButtons
-  },
   name: "Category",
   methods: {
     submit() {

src/views/questions/Grade.vue

  <template>
-  <v-form>
+  <v-form @submit.prevent="submitGrade" ref="formGrade" v-model="validity">
     Quel est le diplôme le plus élevé que vous ayez obtenu ?
-    <v-radio-group v-model="radios">
-      <v-radio label="Choix 1" value="radio-1"></v-radio>
-      <v-radio label="Choix 2" value="radio-2"></v-radio>
-      <v-radio label="Choix 3" value="radio-3"></v-radio>
-      <v-radio label="Choix 4" value="radio-4"></v-radio>
-      <v-radio label="Choix 5" value="radio-5"></v-radio>
-      <v-radio label="Choix 6" value="radio-6"></v-radio>
+    <v-radio-group required :rules="rules" v-model="diploma">
+      <v-radio autofocus label="Bac +4 et + (Master) / diplômes d’ingénieur" value="level_1"></v-radio>
+      <v-radio label="Bac +3 (Licence)" value="level_2"></v-radio>
+      <v-radio label="Bac +1 à bac +2 (BTS / DUT)" value="level_3"></v-radio>
+      <v-radio label="Bac" value="level_4"></v-radio>
+      <v-radio label="CAP / BEP" value="level_5"></v-radio>
+      <v-radio label="Je n'ai aucun de ces diplômes" value="level_bellow_5"></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>
  
  <script>
-import QuestionButtons from "@/components/QuestionButtons";
 export default {
   name: "Grade",
-  components: {
-    QuestionButtons
+  created() {
+    this.diploma = this.$store.state.situation.diploma;
   },
+  data: () => ({
+    diploma: "",
+    validity: false,
+    rules: [v => !!v || "doit être renseigné"]
+  }),
+
   methods: {
-    submit() {
-      //this.$store.dispatch("submitDiploma", this.??);
+    validate() {
+      if (this.$refs.formGrade.validate()) {
+        this.validity = true;
+      }
+    },
+    back() {
+      this.$router.go(-1);
+    },
+    submitGrade() {
+      this.validate();
+      this.$store.dispatch("submitGrade", this.diploma);
       this.$router.push("votre-adresse");
     }
   }

src/views/questions/Inscription.vue

@@ -6,16 +6,13 @@
       <v-radio label="Moins d'un an" value="less_than_year"></v-radio>
       <v-radio label="Plus d'un an" value="more_than_a_year"></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>
  
  <script>
-import QuestionButtons from "@/components/QuestionButtons";
 export default {
-  components: {
-    QuestionButtons
-  },
   name: "Inscription",
   methods: {
     submit() {

src/views/questions/Other.vue

@@ -6,16 +6,13 @@
     <v-checkbox v-model="selected" label="Choix 2" value="John"></v-checkbox>
     <v-checkbox v-model="selected" label="Choix 3" value="John"></v-checkbox>
     <v-checkbox v-model="selected" label="Choix 4" value="John"></v-checkbox>
-    <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: "Other",
   methods: {
     submit() {