Validar Formularios en Vue JS

En este tutorial sobre ¿Cómo validar formularios, campos o inputs en Vue?, vamos a hacer uso de uno de mis paquetes de npm, el cual se llama @elpandev/laravel-validator y contiene la mayoría de las reglas que usa Laravel para validar formularios.

Formulario en Vue

Antes de validar, vamos a crear un formulario con los campos name y description, los cuales se van a encontrar dentro de un formulario de html y un método prevent llamado validate.

<template>
  <form @submit.prevent="validate()">
    <input type="text" v-model="name">
    <input type="text" v-model="description">

    <button type="submit">validar</button>
  </form>
</template>

Plantilla del Formulario

Adicionalmente, vamos a crear el método validate para validar los campos del formulario usando nuestro plugin de npm.

<script lang="ts">
  import Vue from 'vue'
  import Validator, { IMessages, IRules, IValues } from "@elpandev/laravel-validator";
  export default Vue.extend({
    data() {
      return {
        name: '',
        description: ''
      }
    },
    methods: {
      validate() {
        const payload: IValues = {
          name:        this.name,
          description: this.description,
        }
  
        const rules: IRules = {
          name:        ['required'],
          description: ['required']
        }
  
        const messages: IMessages = {
          name:        { required: 'The field "name" is required' },
          description: { required: 'The dield "description" is required' },
        }
  
        const validator = new Validator(payload, rules, messages)
  
        console.log(validator.errors)
      }
    }
  })
</script>

Script del Formulario

Validación del Formulario

Ahora que tenemos nuestro componente de Vue listo, vamos a dejar los campos vacíos y validar nuestro formulario, obteniendo como resultado 2 errores que coinciden con las reglas "required" que hemos añadido para cada campo.

{
  description: ['The dield "description" is required'],
  name:        ['The field "name" is required'],
}

Errores en el Formulario

Si quieres saber más sobre las reglas que contiene este paquete, te recomiendo revisar las reglas de validación de Laravel ya que son las mismas que contiene nuestro plugin.