diff --git a/bundler-free/index.html b/bundler-free/index.html
index 40b8c17..7750088 100644
--- a/bundler-free/index.html
+++ b/bundler-free/index.html
@@ -1,30 +1,34 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Vue js sans bundler !</title>
-  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
-</head>
-<body>
-  <div id="app">
-    <!-- <p>Mon nom est {{ name }}</p> -->
-    <greet v-bind:message="name"></greet>
-    <input type="text" v-bind:value="name" v-on:input="name = $event.target.value" />
-  </div>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vue js sans bundler !</title>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
+  </head>
+  <body>
+    <div id="app">
+      <!-- <p>Mon nom est {{ name }}</p> -->
+      <greet v-bind:message="name"></greet>
+      <input
+        type="text"
+        v-bind:value="name"
+        v-on:input="name = $event.target.value"
+      />
+    </div>
 
-  <script>
-    Vue.component('greet', {
-      template: '<p>Mon nom est {{ message }}</p>',
-      props: ['message']
-    });
+    <script>
+      Vue.component("greet", {
+        template: "<p>Mon nom est {{ message }}</p>",
+        props: ["message"],
+      });
 
-    new Vue({
-      el: '#app',
-      data: {
-        name: 'julien',
-      }
-    });
-  </script>
-</body>
-</html>
\ No newline at end of file
+      new Vue({
+        el: "#app",
+        data: {
+          name: "julien",
+        },
+      });
+    </script>
+  </body>
+</html>
diff --git a/vue2/package-lock.json b/vue2/package-lock.json
index 256d982..cec4211 100644
--- a/vue2/package-lock.json
+++ b/vue2/package-lock.json
@@ -11021,6 +11021,11 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vuelidate": {
+      "version": "0.7.6",
+      "resolved": "https://registry.npmjs.org/vuelidate/-/vuelidate-0.7.6.tgz",
+      "integrity": "sha512-suzIuet1jGcyZ4oUSW8J27R2tNrJ9cIfklAh63EbAkFjE380iv97BAiIeolRYoB9bF9usBXCu4BxftWN1Dkn3g=="
+    },
     "watchpack": {
       "version": "1.7.5",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",
diff --git a/vue2/package.json b/vue2/package.json
index 6c33ac9..894baa6 100644
--- a/vue2/package.json
+++ b/vue2/package.json
@@ -10,7 +10,8 @@
   "dependencies": {
     "core-js": "^3.6.5",
     "vue": "^2.6.11",
-    "vue-router": "^3.4.9"
+    "vue-router": "^3.4.9",
+    "vuelidate": "^0.7.6"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",
diff --git a/vue2/src/components/AForm.vue b/vue2/src/components/AForm.vue
index d2b4719..caf1198 100644
--- a/vue2/src/components/AForm.vue
+++ b/vue2/src/components/AForm.vue
@@ -1,25 +1,78 @@
 <template>
   <form @submit.prevent="submitForm">
+    <label for="firstname">Prénom</label>
+    <input
+      type="text"
+      :class="{ 'has-error': $v.firstname.$error }"
+      id="firstname"
+      v-model="$v.firstname.$model"
+    />
+    <div v-if="$v.firstname.$error">
+      <p v-if="!$v.firstname.required">Ce champs est requis !</p>
+    </div>
+
+    <label for="lastname">Nom</label>
+    <input type="text" id="lastname" v-model="$v.lastname.$model" />
+
+    <label for="rememberme">Se souvenir de moi</label>
+    <input type="checkbox" v-model="rememberMe" id="rememberme" />
+
+    <label for="lastnamerequired">Nom de famille requis</label>
+    <input type="checkbox" v-model="lastnameRequired" id="lastnamerequired" />
+
+    <incrementer v-model="age" />
+
+    <p>Vous vous appelez : {{ firstname }} {{ lastname }}</p>
+    <p v-if="rememberMe">On se souvient !</p>
+
     <button @click.prevent="$emit('custom-event', new Date())">
       Envoyé événement personnalisé
     </button>
-    <button type="submit">Envoyer</button>
+
+    <button type="submit" :disabled="isInvalid">Envoyer</button>
   </form>
 </template>
 
 <script>
+import Incrementer from "./Incrementer";
+import { required } from "vuelidate/lib/validators";
+
 export default {
-  // data() {
-  //   return {
-  //     window,
-  //   };
-  // },
+  components: { Incrementer },
+  data() {
+    return {
+      age: 18,
+      rememberMe: false,
+      firstname: "",
+      lastname: "",
+      lastnameRequired: true,
+    };
+  },
   methods: {
     submitForm() {
       alert("Formulaire envoyé");
       this.$router.push({ name: "home" });
     },
   },
+  validations() {
+    if (this.lastnameRequired) {
+      return {
+        firstname: {
+          required,
+        },
+        lastname: {
+          required,
+          // sameAs: (v) => v === this.firstname,
+        },
+      };
+    }
+
+    return {
+      firstname: {
+        required,
+      },
+    };
+  },
   // beforeRouteEnter(to, from, next) {},
 };
 </script>
diff --git a/vue2/src/components/Incrementer.vue b/vue2/src/components/Incrementer.vue
new file mode 100644
index 0000000..10fdc97
--- /dev/null
+++ b/vue2/src/components/Incrementer.vue
@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <p>Valeur actuelle : {{ value }}</p>
+    <button @click.prevent="$emit('input', value + 1)">+</button>
+    <button @click.prevent="$emit('input', value - 1)">-</button>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Number,
+  },
+};
+</script>
diff --git a/vue2/src/main.js b/vue2/src/main.js
index 56baa30..bf7dbf4 100644
--- a/vue2/src/main.js
+++ b/vue2/src/main.js
@@ -1,5 +1,6 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
+import Vuelidate from "vuelidate";
 import Layout from "./Layout.vue";
 import ComponentLayout from "./ComponentLayout.vue";
 
@@ -22,6 +23,7 @@ const Link = () =>
   import(/* webpackChunkName: "link" */ "./components/Link.vue");
 
 Vue.use(VueRouter);
+Vue.use(Vuelidate);
 
 Vue.config.productionTip = false;
 
