person: add validation for required fields in on-the-fly person

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/OnTheFly/Person.vue

@@ -22,24 +22,45 @@
 <div v-else-if="action === 'edit' || action === 'create'">
 
    <div class="form-floating mb-3">
-      <input class="form-control form-control-lg" id="lastname" v-model="lastName" v-bind:placeholder="$t('person.lastname')" />
+      <input
+          class="form-control form-control-lg"
+          id="lastname"
+          v-model="lastName"
+          :placeholder="$t('person.lastname')"
+          @change="checkErrors"
+      />
       <label for="lastname">{{ $t('person.lastname') }}</label>
    </div>
 
    <div class="form-floating mb-3">
-      <input class="form-control form-control-lg" id="firstname" v-model="firstName" v-bind:placeholder="$t('person.firstname')" />
+      <input
+          class="form-control form-control-lg"
+          id="firstname"
+          v-model="firstName"
+          :placeholder="$t('person.firstname')"
+          @change="checkErrors"
+      />
       <label for="firstname">{{ $t('person.firstname') }}</label>
    </div>
 
    <div v-for="(a) in config.altNames" :key="a.key" class="form-floating mb-3">
-      <input class="form-control form-control-lg" :id="a.key" @input="onAltNameInput" />
+      <input
+          class="form-control form-control-lg"
+          :id="a.key"
+          @input="onAltNameInput"
+      />
       <label :for="a.key">{{ a.labels.fr }}</label>
    </div>
 
    <!--  TODO fix placeholder if undefined
    -->
    <div class="form-floating mb-3">
-      <select class="form-select form-select-lg" id="gender" v-model="gender">
+      <select
+         class="form-select form-select-lg"
+         id="gender"
+         v-model="gender"
+         @change="checkErrors"
+         >
          <option selected disabled >{{ $t('person.gender.placeholder') }}</option>
          <option value="woman">{{ $t('person.gender.woman') }}</option>
          <option value="man">{{ $t('person.gender.man') }}</option>
@@ -62,8 +83,8 @@
       <span class="input-group-text" id="phonenumber"><i class="fa fa-fw fa-phone"></i></span>
       <input class="form-control form-control-lg"
          v-model="phonenumber"
-         v-bind:placeholder="$t('person.phonenumber')"
+         :placeholder="$t('person.phonenumber')"
-         v-bind:aria-label="$t('person.phonenumber')"
+         :aria-label="$t('person.phonenumber')"
          aria-describedby="phonenumber" />
    </div>
 
@@ -71,8 +92,8 @@
       <span class="input-group-text" id="mobilenumber"><i class="fa fa-fw fa-mobile"></i></span>
       <input class="form-control form-control-lg"
          v-model="mobilenumber"
-         v-bind:placeholder="$t('person.mobilenumber')"
+         :placeholder="$t('person.mobilenumber')"
-         v-bind:aria-label="$t('person.mobilenumber')"
+         :aria-label="$t('person.mobilenumber')"
          aria-describedby="mobilenumber" />
    </div>
 
@@ -80,11 +101,17 @@
       <span class="input-group-text" id="email"><i class="fa fa-fw fa-at"></i></span>
       <input class="form-control form-control-lg"
          v-model="email"
-         v-bind:placeholder="$t('person.email')"
+         :placeholder="$t('person.email')"
-         v-bind:aria-label="$t('person.email')"
+         :aria-label="$t('person.email')"
          aria-describedby="email" />
    </div>
 
+   <div class="alert alert-warning" v-if="errors.length">
+     <ul>
+       <li v-for="(e, i) in errors" :key="i">{{ e }}</li>
+     </ul>
+   </div>
+
 </div>
 </template>
 
@@ -108,6 +135,7 @@ export default {
          config: {
             altNames: []
          },
+         errors: []
       }
    },
    computed: {
@@ -183,6 +211,18 @@ export default {
       }
    },
    methods: {
+      checkErrors(e) {
+         this.errors = [];
+         if (!this.person.lastName) {
+             this.errors.push("Le nom ne doit pas être vide.");
+         }
+         if (!this.person.firstName) {
+             this.errors.push("Le prénom ne doit pas être vide.");
+         }
+         if (!this.person.gender) {
+             this.errors.push("Le genre doit être renseigné");
+         }
+      },
       loadData() {
          getPerson(this.id)
             .then(person => new Promise((resolve, reject) => {