Adding Basic Form Validation

Cristiano Magro

10 days ago 6dd01e633f21953b88c6c302767fbaa1a3918214

 11 - Forms/xno-forms-01-starting-setup/src/components/TheForm.vue

@@ -1,8 +1,9 @@
<template>
  <form @submit.prevent="submitForm">
    <div class="form-control">
    <div class="form-control" :class="{invalid: usernameValidity  === 'invalid'}">
      <label for="user-name">Your Name</label>
      <input id="user-name" name="user-name" type="text" v-model="userName" />
      <input id="user-name" name="user-name" type="text" v-model.trim="userName" @blur="validateInput" />
      <p v-if="usernameValidity  === 'invalid'">please enter a valid name</p>
    </div>
    <div class="form-control">
      <label for="age">Your Age (Years)</label>
@@ -66,6 +67,7 @@
      interest: [],
      how: null,
      confirm: false,
      usernameValidity: 'pending',
    }
  },
  methods: {
@@ -91,7 +93,14 @@
      console.log('Confirm');
      console.log(this.confirm);
      this.confirm = false;
    },
    validateInput() {
      if (this.userName === '') {
        this.usernameValidity = 'invalid';
      } else {
        this.usernameValidity = 'valid';
    }
    },
  }

}
@@ -111,6 +120,14 @@
  margin: 0.5rem 0;
}

.form-control.invalid input{
border-color: red;
}
.form-control.invalid label{
color: red;
}


label {
  font-weight: bold;
}