Como usar Vuelidate con BootstrapVue

Partimos de la idea que tienes un proyecto creado con vue-cli3 y estas usando BootstrapVue.

Configurando Vuelidate

Lo primero que necesitamos es instalar Vuelidate para esto simplemente corre el siguiente comando en la terminal justo dentro del directorio de tu proyecto

npm install vuelidate --save  

Luego debemos configurarlo en nuestro archivo main.js agregando las siguientes lineas

import Vuelidate from 'vuelidate'  
Vue.use(Vuelidate)  

Vuelidate tiene varias formas de usarse en este caso vamos a usar mixin que es la propiedad que tiene vuejs para extender las funcionalidades propias, para esto solo debemos agregarlo dentro de los mixins mixins: [validationMixin] del componente donde queramos usarlo

import { validationMixin } from 'vuelidate'

export default {  
  name: "MyComponent",
  mixins: [validationMixin],
  data() {}
}

Usando Vuelidate

Como en este caso vamos a usarlo junto a BootstrapVue las cosas son un poco mas simples.

Supongamos que tenemos un input que debe recibir un número de celular el cual debe validar que el campo este lleno y que sea un número valido que comience por 3 y tenga 10 dígitos. Bueno para esto usaremos vuelidate.

<b-form-group  
  label-cols="3"
  label="Celular">
  <b-form-input
    v-model="form.phoneNumber"
    placeholder="3102334455"
  />
</b-form-group>  
import { validationMixin } from 'vuelidate'

export default {  
  name: "ComposeSms",
  mixins: [validationMixin],
  data() {
    return {
      form: {
        phoneNumber: '',
      }
    }
  }

Siguiente el ejemplo anterior, necesitamos crear un validador personalizado, para esto podemos usar un helper que provee vuelidate junto con un validador que ya trae listo y se llama numeric. Puedes encontrar la lista de todo los validadores que provee vuelidate aca

Ahora solo debemos importarlos por medio de la siguiente linea

import { required, numeric, helpers } from 'vuelidate/lib/validators'  

luego podemos definir un validador customizado

const isPhoneNumber = helpers.regex('numeric', /^3[0-9]{9}$/)  

Ahora configuramos el validador dentro del modelo que usa nuestro input, para esto agregamos una nueva función llamda validations la cual se incluye al cargar vuelidate como mixin.

validations: {  
    form: {
      phoneNumber: {
        required,
        isPhoneNumber
      }
    }

Por ultimo debemos agregar dos cosas, la primera será usar la propiedad state de bootstrap para resaltar el input cuando exista o no un error y utilizar el modelo que está enlazado automaticante por medio de vuelidate.

v-model="$v.form.phoneNumber.$model"  
:state="$v.form.phoneNumber.$dirty ? !$v.form.phoneNumber.$invalid : null"

Fijate que accedesmos a una propiedad llamada $invalid esta es una propiedad que crea por defecto vuelidate la cual indicara si la validación paso o no, el valor será un boolean. Ademas de esto cambiamos nuestro modelo por el que se enlaza automaticamente al definir nuestra validación (esto lo genera vuelidate), y por ultimo tenemos una condición dentro de :state usando la propiedad $dirty la cual si es false indica que el usuario no ha tocado aun este campo para lo cual asignaremos null al state evitando que se marque como error en el primer momento en que se carga nuestro formulario.

La segunda parte es agregar un componente que proveed BootstrapVue que se llama <b-form-invalid-feedback> este componente esta relacionado con el tag state que cuando toma un valor de true hace que se renderize, asi es que aca es donde pondremos nuestro mensaje de error

<b-form-invalid-feedback>  
  campo requerido, debe iniciar por 3 y contener 10 digitos
</b-form-invalid-feedback>  

Validacion fallida

Validacion exitosa

Con esto ya terminariamos la configuración y asi quedaría todo el código

<b-form-group  
  label-cols="3"
  label="Celular">
  <b-form-input
    :state="!$v.form.phoneNumber.$invalid"
    v-model="form.phoneNumber"
    placeholder="3102334455"
  />
  <b-form-invalid-feedback>
    campo requerido, debe iniciar por 3 y contener 10 digitos
  </b-form-invalid-feedback>
</b-form-group>  
import { validationMixin } from 'vuelidate'  
import { numeric, helpers } from 'vuelidate/lib/validators'

const isPhoneNumber = helpers.regex('numeric', /^3[0-9]{9}$/)

export default {  
  name: "ComposeSms",
  mixins: [validationMixin],
  data() {
    return {
      form: {
        phoneNumber: '',
      }
    }
  },
  validations: {
    form: {
      phoneNumber: {
        required,
        isPhoneNumber
      }
    }
  },

Jose Aponte

Desarrollador full-stack apasionado por las tecnologías de información y los lenguajes de programación. Me gustan divertirme con mi familia, mi lema es "Nunca paras de Aprender"

Bogota

Subscribe to Jappsku Engineering Blog

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!