Validación Quasar Framework con Vuelidate

Hola amigo lector de Código JS-desarrollo web en Sevilla, en esta entrada vamos a ver la validación en Quasar Framework con Vuelidate. Aunque Quasar cuenta con una validación con reglas básicas para usarlas en sus formularios, es posible que necesitemos una validación más avanzada en nuestros componentes. Para esto utilizaremos Vuelidate mediante un fichero boot de quasar. Con este método podremos usar cualquier librería de validación compatible con Vue.

Tabla de contenidos

Instalando Vuelidate

Primero vamos a instalar Vuelidate en nuestro proyecto, en este caso usamos npm como gestor de paquetes.

npm install vuelidate --save

Configurando Vuelidate en Quasar Framework

Una vez que tenemos Vuelidate instalado, creamos un nuevo fichero boot con Quasar-CLI.

quasar new boot vuelidate

Abrimos el nuevo fichero vuelidate.js que se encuentra en la carpeta  /boot

Reemplazamos el código en el fichero con el siguiente:

import Vuelidate from 'vuelidate'

export default ({ Vue }) => {
  Vue.use(Vuelidate)
}

Aquí, lo que estamos haciendo es diciéndole a Quasar que use  Vuelidate en todo el proyecto. Abrimos el fichero de quasar.conf.js y añadimos vuelidate al array boot para activarlo.

Ahora deberíamos poder acceder a los métodos y propiedades de Vuelidate en nuestros componentes Quasar.

Ejemplo Quasar Form y Vuelidate

Ahora veremos un pequeño ejemplo de cómo podemos implementar Vuelidate en un formulario.  En nuestro componente Vue podemos usar varias reglas de validación de esta manera:

<q-input
   v-model="email"
   class="q-mb-md"
   color="blue-grey-10"
   type="email"
   label="E-mail"
   :error-message="mensaError('email')"
   :error="$v.email.$invalid"
   counter
   maxlength="30"
/>

Usamos la validación externa en Quasar y solo tenemos que pasar error y error-message. Desde error-message llamamos un method , mensaError() para mostrar mensajes de error por cada campo, también podemos usar los slot. En el script del componente añadimos las validaciones de todos los campos del formulario.

import { required, email, minLength } from 'vuelidate/lib/validators'

validations: {
    email: { required, email },
    pass: { required, minLength: minLength(4) }
  },
methods: {
    mensaError (campo) {
      if (campo === 'email') {
        if (!this.$v.email.email) return 'Debe ser un email'
        if (!this.$v.email.required) return 'Campo requerido'
      }
      if (campo === 'pass') {
        if (!this.$v.pass.minLength) return 'Tamaño minimo 4 caracteres'
        if (!this.$v.pass.required) return 'Campo requerido'
      }
    }
  }

Las validaciones las creamos en validations: {}. También tenemos un método donde comprobamos los errores de cada campo para mostrar varios errores de validación para un mismo input. Este ejemplo completo lo puedes clonar desde github. Bueno amigos, espero que os sea útil en vuestros proyectos. No dejéis de suscribiros para no perderos las próximas entradas. Nos Vemos!