end of question 7 - error management and red borders

src/view/nav-bar.js

@@ -17,25 +17,36 @@ export default{
 			this.clicked=!this.clicked;
 		},
 		checkFields: function() {
-			if(this.id===""){
-				this.errMessage+="The id field must be required "
-			}
-			else if(this.name===""){
-				this.errMessage+="The name field must be required "
-			}
-			else if(this.description===""){
-				this.errMessage+="The description field must be required "
+			this.errMessage="";
+			document.querySelector("#id").removeAttribute("style");
+			document.querySelector("#name").removeAttribute("style");
+			document.querySelector("#desc").removeAttribute("style");
+			if(this.id===""||this.name===""||this.description===""){
+				this.errMessage+="The";
+				if(this.id===""){
+					this.errMessage+=" id";
+					document.querySelector("#id").setAttribute("style","border: 1px solid #d66");
+				}
+				if(this.name===""){
+					this.errMessage+="  name";
+					document.querySelector("#name").setAttribute("style","border: 1px solid #d66");
+				}
+				if(this.description===""){
+					this.errMessage+=" description";
+					document.querySelector("#desc").setAttribute("style","border: 1px solid #d66");
+				}
+				this.errMessage+=" field must be required ";
 			}
 			else{
 				if(this.name.lenght<5){
-					this.errMessage+="The name must have at least 5 caracters "
+					this.errMessage+="The name must have at least 5 caracters ";
 				}
 				if(this.description.lenght<20){
-					this.description+="The description must have at least 20 caracters "
+					this.description+="The description must have at least 20 caracters ";
 				}
 			}
 			if(this.errMessage.length===0){
-                console.log("jappelle la fonction")
+                console.log("jappelle la fonction");
 				this.addTeam();
 			}
 		},
@@ -63,17 +74,17 @@ export default{
 			<label>{{errMessage}}</label><br/>
 			<div>
 				<label>id</label><br/>
-				<input type="number" v-model="id"/>
+				<input id="id" type="number" v-model="id"/>
 			</div>
 			
 			<div>
 				<label>Name</label><br/>
-				<input type="text" v-model="name"/>
+				<input id="name" type="text" v-model="name"/>
 			</div>
 
 			<div>
 				<label>Description</label><br/>
-				<textarea v-model="description"></textarea>
+				<textarea id="desc" v-model="description"></textarea>
 			</div>
 
 			<input type="submit" value="Submit" v-on:click="checkFields"/>