Validar componentes anidados en Vuejs 2 con VeeValidate
Validar componentes anidados en Vuejs 2 con VeeValidate
¡INSCRÍBETE A CUALQUIER CURSO CON UN 50% DE DESCUENTO PARA NUEVOS CLIENTES!


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 con el siguiente comando.

Ahora vamos a realizar la configuración más sencilla que existe en 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.

Curso completo de Vuejs 2 y Vuex

¿Todavía no conoces Vuejs 2 y Vuex?, en cursosdesarrolloweb.es tienes un curso completo para aprender a trabajar con Vuejs 2 y Vuex utilizando las últimas versiones con ejemplos fáciles y útiles.

Todos los cursos tienen acceso de forma indefinida 24/7, así que puedes seguirlos adecuando el horario a tus necesidades.

  • @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.