Validazione dei form in Vue.js 3

Ho specificato la versione 3 perchè mi pare di capire che questo codice non sia compatibile con le versioni precedenti di Vue.js.

Il codice è un esempio reale; nel mio caso c'è anche una dropdown; non spiegherò come viene riempita.

Per la validazione useremo vuelidate!

Come da guida lo potete installare così:

$ npm install @vuelidate/core @vuelidate/validators

Qui sotto il codice completo della pagina:

<template>

  <div class="grid">

    <div class="col-12">
      <div class="card p-fluid">
        <h5>{{ title }}</h5>

        <div class="field">
          <label for="allenamento">Allenamento</label>
          <Dropdown id="allenamento" v-model="selctedAllenamento" :options="allenamenti"
                    optionLabel="label" optionValue="value" :filter="true" :showClear="true"
                    placeholder="Seleziona un allenamento"></Dropdown>
        </div>

        <div class="field">
          <label for="data">Data</label>
          <Calendar id="data" v-model="selectedData" :showButtonBar="true" :touchUI="true" :showIcon="true"
                    dateFormat="dd/mm/yy"/>
        </div>

        <div class="field">
          <label for="note">Note</label>
          <Editor id="note" v-model="selectedNote" editorStyle="height: 320px"/>
        </div>
      </div>

      <div class="field">
        <label for="finito">Finito</label>
        <br>
        <InputSwitch id="finito" v-model="selectedFinito"/>
      </div>

      <div class="field">
        <Button type="button" label="Search" icon="pi pi-save" @click="submit()"/>
      </div>

    </div>

  </div>

</template>

<script>
import useVuelidate from '@vuelidate/core';
import {required} from '@vuelidate/validators';

export default {
  name: 'Aggiungi allenamento',
  allService: null,
  setup() {
    return {v$: useVuelidate()}
  },
  data() {
    return {
      title: "Aggiungi allenamento",
      allenamenti: null,
      selctedAllenamento: null,
      selectedData: null,
      selectedNote: null,
      selectedFinito: true
    }
  },
  validations() {
    return {
      selctedAllenamento: {required},
      selectedData: {required},
      selectedNote: {required}
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    async submit() {
      const result = await this.v$.$validate();
      if (!result) {
        console.log('Form non validato');
      } else {
        console.log(this.selctedAllenamento);
        console.log(this.selectedData);
        console.log(this.selectedNote);
        console.log(this.selectedFinito);
      }
    }
  }
}
</script>

Le validazioni le impostiamo nella funzione validations.

Nel mio caso ho specificato solo i required, ma ovviamente potete fare molto di più.

Enjoy!