Validare un form in Vue.js

Vue.js ha delle funzioni integrate per la validazione dei form; il tutto gira intorno al v-model.

Nel caso in questione, non useremo il tag form, in quanto i dati li invio tramite AJAX; ma il concetto è praticamente lo stesso.

Stavolta partiamo da Javascript:

  new Vue({
        el: '#nota',
        data: {
            errors: [],
            titolo: null,
            testo: null
        },
        methods: {
            upNota: function (event) {
                if (this.titolo && this.testo) {
                    this.errors = [];
                    console.log(this.titolo);
                }

                this.errors = [];
                if (!this.titolo) {
                    this.errors.push('Titolo obbligatorio');
                }
                if (!this.testo) {
                    this.errors.push('Testo obbligatorio');
                }

                event.preventDefault();
            }
        }
    });

Nel metodo upNota, che sarà richiamato dal bottone, controlliamo i valori dei campi di input, e agiamo di conseguenza.

Nel caso di errori, riempiamo l'array errors.

Le input sono legato attraverso v-model in questa maniera:

<div id="nota">
    <div v-if="errors.length">
        <b>Si sono verificati degli errori:</b>
        <ul>
            <li v-for="error in errors">{{ error }}</li>
        </ul>
    </div>
    <label>Titolo
        <input type="text" placeholder="Titolo" name="titolo" id="titolo" v-model="titolo">
    </label>
    <label>
        Testo
        <textarea placeholder="Testo" name="testo" id="testo" v-model="testo"></textarea>
    </label>
    <button type="button" v-on:click="upNota">Salva</button>
</div>

Come vedete, abbiamo un div che diventa visibile solo nel caso di errori; questo controllo lo facciamo con v-if.

Enjoy!