...

Para

...

Para hacer la validación de formularios en Vue, hay algunos aspectos que debemos tener en cuenta, y disponemos del paquete Vuelidate con algunas funcionalidades que nos sirven para ello. Veamos cómo lo haríamos., podemos implementar las comprobaciones directamente para casos simples, pero para casos más complejos disponemos de la librería Vuelidate (para todos los detalles, podemos consultar su documentación oficial).

Uso de @submit.prevent

Cuando en un formulario hacemos submit, el comportamiento por defecto es que se haga una redirección mandando los datos del formulario, pero nosotros podemos mandar o no (podemos guardar datos en vuex como paso intermedio, por ejemplo) los datos a nuestro backend, al servicio REST, y navegar utilizando Vue Router. Para evitar que se haga esa acción lo más probable es que no queramos hacer eso, sino tratar los datos y hacer una llamada a una api. Para evitar esa redirección por defecto cuando hacemos submit, podemos capturar el evento @submitel evento @submit.prevent, añadiendo la funcionalidad que queramos: comprobación de los campos, envío de datos, navegación...

<form @submit.prevent="checkSubmit">
  ...
</form>

...

methods: {
    checkSubmit() {
      console.log('submit!')...
      ...
    }

La forma de hacer las comprobaciones será a través del método que definamos en submit.prevent, utilizando variables y estilos y renderizaciones condicionales para mostrar los errores. En el apartado de Vuelidate veremos que nos facilita esta tarea.

Required en componentes Primevue

Algunos componentes Primevue permiten utilizar required e implementan un mensaje de error en caso de que se intente hacer submit y no se haya rellenado el campo, pero no lo utilizaremos, pues, aparte de que no está incluido en todos los componentes, nos ofrece menos flexibilidad. 

Paquete Vuelidate

Podemos consultar la documentación oficial de Vuelidate para ver todos los detalles, en este apartado indicaremos el uso básico y más común que haremos de este paquete.

Vuelidate nos añade la posibilidad de definir un bloque validations dentro del export default de nuestros componentes Vue, en el que indicar las variables que se quieren comprobar y las comprobaciones que hacer sobre ellas. Además, también nos proporciona una serie de propiedades calculadas para comprobar los errores que hay y formar nuestra interfaz en consecuencia.

Instalación

Para instalar Vuelidate, primero tendremos que añadirlo a las dependencias de nuestro proyecto ejecutando:

npm i vuelidate

Después tendremos que añadir lo siguiente a nuestro main.js:

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

Con esto ya podremos usar el bloque validations en nuestros componentes. En ellos solo tendremos que importar los validadores que que vayamos a utilizar.

...

Importar Vuelidate

Para importar Vuelidate en nuestros componentes, lo haremos así:

import useVuelidate from '@vuelidate/core';

Y dentro del export default defineComponent({ ... }), habrá que incluir un campo setup con lo siguiente:

  setup() {
    return { v$: useVuelidate() };
  },

Validaciones

Estableceremos las diferentes validaciones que queremos que se hagan sobre variables que estén incluidas en el data del componente, especificándolas en un campo validations dentro del export default defineComponent({ ... }), así:

validations: {
    nombre: {
      required: required$,
      minLength: minLength$(4),
      maxLength: maxLength$(500),
    },},

En este caso, "nombre" es la variable que estaría definida dentro del data del componente, y required, minLength y maxLength son las validaciones que se le aplican.

Los validadores son las comprobaciones que se harán sobre las variables que especifiquemos, y por defecto Vuelidate proporciona los siguientes:

...