Validar formularios con Vuejs 2 y VeeValidate

Validar formularios con Vuejs 2 es muy sencillo, y más aún si lo hacemos utilizando el plugin VeeValidate. En este tutorial vamos a ver una introducción para aprender a configurarlo y hacer nuestras primeras validaciones.

Lo primero que debemos hacer es instalar el plugin VeeValidate con el siguiente comando. npm install vee-validate --save Ahora vamos a realizar la configuración más sencilla que existe en VeeValidate.

import VeeValidate from 'vee-validate';
Vue.use(VeeValidate);

Una vez tenemos todo configurado, vamos a crear 2 componentes, 1 centralizado para mostrar todos los errores de formulario, y otro que representará nuestro formulario y la lógica para procesarlo.

FormComponent.vue

<template>
  <form id="registerForm" method="POST" @submit.prevent="validateBeforeSubmit">
    <fieldset>
        <legend>Mi formulario con Vuejs 2</legend>
        <div class="form-group col-xs-3 col-md-2">
            <label for="firstname" class="control-label">Nombre</label>
            <input
                v-model="firstname"
                name="firstname"
                class="form-control"
                id="firstname"
                placeholder="Nombre"
                v-validate="'required'"
                :class="{'has-errors': errors.has('firstname')}"
            >
            <FormError :attribute_name="'firstname'" :errors_form="errors"> </FormError>
        </div>
        <div class="form-group col-xs-3 col-md-2">
            <label for="lastname" class="control-label">Apellidos</label>
            <input
                v-model="lastname"
                name="lastname"
                class="form-control"
                id="lastname"
                placeholder="Apellidos"
                v-validate="'required'"
                :class="{'has-errors': errors.has('lastname')}"
            >
            <FormError :attribute_name="'lastname'" :errors_form="errors"> </FormError>
        </div>
        <div class="form-group col-xs-3 col-md-2">
            <label for="email" class="control-label">Email</label>
            <input
                v-model="email"
                name="email"
                class="form-control"
                id="email"
                placeholder="Email"
                v-validate="'required|email'"
                :class="{'has-errors': errors.has('email')}"
            >
            <FormError :attribute_name="'email'" :errors_form="errors"> </FormError>
        </div>
        <div class="form-group col-xs-3 col-md-2">
            <label for="password" class="control-label">Password</label>
            <input
                type="password"
                v-model="password"
                name="password"
                class="form-control"
                id="password"
                placeholder="Password"
                v-validate="'required|min:6'"
                :class="{'has-errors': errors.has('password')}"
            >
            <FormError :attribute_name="'password'" :errors_form="errors"> </FormError>
        </div>
        <div class="form-group col-xs-3 col-md-2">
            <label for="password_confirmation" class="control-label">Confirma el password</label>
            <input
                type="password"
                v-model="password_confirmation"
                name="password_confirmation"
                class="form-control"
                id="password_confirmation"
                placeholder="Confirma el password"
                v-validate="'required|confirmed:password'"
                :class="{'has-errors': errors.has('password_confirmation')}"
            >
            <FormError :attribute_name="'password_confirmation'" :errors_form="errors"> </FormError>
        </div>
        <div class="form-group">
            <div class="col-md-2 col-xs-12 col-sm-3 pull-right">
                <button type="submit" name="register" class="btn btn-block btn-primary">
                    Registrarme
                </button>
            </div>
       </div>
    </fieldset>
  </form>
</template>

<script>
    import FormError from '../FormError';
    export default {
        name: "form-component",
        components: {
            FormError
        },
        data () {
            return {
                firstname: null,
                lastname: null,
                email: null,
                password: null,
                password_confirmation: null
            }
        },
        methods: {
            validateBeforeSubmit: function() {
                this.$validator.validateAll().then((result) => {
                    if (result) {
                        alert('From Submitted!');
                        return;
                    }
                    //errores
                });
            }
        }
    }
</script>

FormError.vue

<template>
    <span v-show="errors_form.has(attribute_name)" class="help brand-color">{{ errors_form.first(attribute_name) }}</span>
</template>

<script>
    export default {
        props: ['attribute_name', 'errors_form']
    }
</script>

• @submit.prevent="validateBeforeSubmit": Evitamos el comportamiento por defecto de un form y ejecutamos el método validateBeforeSubmit al hacer submit.
• v-validate="{rules}": Aquí podemos aplicar las reglas que necesitemos.
• :class="{'has-errors': errors.has({field})}": Aplicamos la clase has-errors si existen errores.
• Componente FormError: Le pasamos el nombre del campo y el objeto errors que nos proporciona VeeValidate para mostrar el correspondiente error en cada caso.
• v-validate="'required|confirmed:password'": Nos aseguramos que los passwords son los mismos.
• this.$validator.validateAll(): Ejecuta el form y si existen errores los muestra.

Así de sencillo es validar formularios con Vuejs 2 y VeeValidate, sólo tienes que procesar el formulario y verás cómo todo funciona.