error message pb

src/view/nav-bar.js

@@ -7,13 +7,36 @@ export default{
 			id:'',
 			name:'',
 			description:'',
-			clicked: false
+			clicked: false,
+			errMessage:''
 		}
 	},
 	methods: {
 		myfun: function() {
 			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 "
+			}
+			else{
+				if(this.name.lenght<5){
+					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 "
+				}
+			}
+			if (this.errMessage.lenght==0) {
+				this.addTeam();
+			}
+		},
 		addTeam: function() {
 			let team = new Team(this.id, this.name, this.description);
 			console.log(team);
@@ -31,6 +54,7 @@ export default{
 			</div>
 			<form @submit.prevent v-if="clicked">
 			<br>
+			<label>{{errMessage}}</label><br/>
 			<div>
 				<label>id</label><br/>
 				<input type="number" v-model="id"/>
@@ -46,7 +70,7 @@ export default{
 				<textarea v-model="description"></textarea>
 			</div>
 
-			<input type="submit" value="Submit" v-on:click="addTeam"/>
+			<input type="submit" value="Submit" v-on:click="checkFields"/>
 			</form>
 		`
 }