Validación Quasar Framework con Vuelidate

Validación Quasar Framework con Vuelidate

Hola amigo lector de Codigo JSdesarrollo 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.

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

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 diciendole 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.

boot vuelidate

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 como podemos implementar Vuelidate en un formulario.

Form Vuelidate

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 sus proyectos. No dejeis de subscribirse para que no te pierdas las próximas entradas.

!Nos Vemos

Suscríbete a nuestro boletín y mantente informado de todas nuestras publicaciones

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.