validate new member

src/views/project/Project_members.vue

@@ -16,11 +16,11 @@
             :search="true"
             :clearable="true"
           />
-          <!--             <ul id="errorlist-title" class="errorlist">
-              <li v-for="error in form.title.errors" :key="error">
-                {{ error }}
-              </li>
-            </ul> -->
+          <ul id="errorlist" class="errorlist">
+            <li v-for="error in newMember.errors" :key="error">
+              {{ error }}
+            </li>
+          </ul>
         </div>
         <div class="field">
           <!-- <label for="add-member"></label> -->
@@ -97,11 +97,7 @@
 
       <div class="ui divider"></div>
 
-      <button
-        @click="validateMembers"
-        type="button"
-        class="ui teal icon button"
-      >
+      <button @click="saveMembers" type="button" class="ui teal icon button">
         <i class="white save icon"></i> Enregistrer les changements
       </button>
     </form>
@@ -134,6 +130,7 @@ export default {
         { name: "Administrateur projet", value: "admin" },
       ],
       newMember: {
+        errors: [],
         user: {
           name: "",
           value: "",
@@ -200,15 +197,26 @@ export default {
   },
 
   methods: {
+    validateNewMember() {
+      this.newMember.errors = [];
+      if (!this.newMember.user.value) {
+        this.newMember.errors.push("Veuillez compléter ce champ.");
+        return false;
+      }
+      return true;
+    },
+
     addMember() {
-      //* find user
-      const indexOfUser = this.projectUsers.findIndex(
-        (el) => el.user.id === this.newMember.user.value
-      );
-      //* modify its userLever
-      this.projectUsers[indexOfUser].userLevel = this.newMember.role;
-      //* empty add form
-      this.newMember.user = { value: "", name: "" };
+      if (this.validateNewMember()) {
+        //* find user
+        const indexOfUser = this.projectUsers.findIndex(
+          (el) => el.user.id === this.newMember.user.value
+        );
+        //* modify its userLever
+        this.projectUsers[indexOfUser].userLevel = this.newMember.role;
+        //* empty add form
+        this.newMember.user = { value: "", name: "" };
+      }
     },
 
     isSortedAsc(column) {
@@ -228,7 +236,7 @@ export default {
       }
     },
 
-    validateMembers() {
+    saveMembers() {
       const data = this.projectUsers.map((member) => {
         return {
           user: member.user,