...

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). Vamos a ver ejemplos básicos de lo que se puede hacer con esta librería.

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!')...
      ...
    }

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() }

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

;
  },

Ese v$ que se define contendrá toda la información de las validaciones que especifiquemos, así como algunos métodos. Podremos acceder a él con this.v$.

Validadores

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. Vuelidate proporciona algunos validadores por defecto (podemos verlos todos en su documentación), que los podemos importar así:

import { required, maxLength, minLength } from '@vuelidate/validators'

También podemos definir nosotros nuestros propios validadores. Dentro del proyecto del Portal-UI hay definidos algunos en src/shared/validations/validators.js, que los importaremos y utilizaremos de la misma manera, poniendo el import de esa ruta. Algunos se redefinen simplemente especificándoles el mensaje de error, por ejemplo:

export const minLength$ = (min) => helpers.withMessage(i18n.global.t('minLength', { min }), minLength(min));

Y si no, podemos definir nuestros propios métodos de validación haciendo un método que reciba un valor y devuelva un booleano. Podemos ver más detalles en su documentación, si queremos, por ejemplo, incluir parámetros extra en los métodos de validación.

Activar validadores

Como veremos en el siguiente apartado, en el template pintaremos los casos de error en el caso de que no se cumplan las validaciones, pero inicialmente no querremos que se muestren (por ejemplo, un campo required inicialmente estará vacío, sólo mostraremos el aviso una vez el usuario haya intentado hacer submit y no haya rellenado ese campo). Para controlar esto, v$ contiene, para cada variable que validamos, un campo $invalid que nos dirá si en todo momento si el valor de la variable pasa las validaciones que hayamos especificado, y un campo $dirty que será false hasta que activemos las validaciones, para así poder controlar si se muestran mensajes de error o todavía no.

Para activar las validaciones, dentro del método que hayamos puesto en @submit.prevent llamaremos al método this.v$.$touch(), lo que hará que los campos $dirty pasen a true. Además, cuando se hace esto, también se rellena el campo $errors de cada una de las variables, por lo que un atajo para mostrar los errores puede ser consultar directamente éste.

Ejemplo de template

Teniendo en cuenta lo anterior, podemos ver este ejemplo:

<form @submit.prevent="checkSubmit" class="form">
  <!-- Nombre del titular -->
  <div class="form__row width100" style="margin-top: 1em">
    <!-- Ejemplo sin el label del campo para simplificar -->
    <!-- Mensajes de error --> 
    <div v-for="(error, index) in v$.nombre.$errors" :key="index">
      <span class="form__error">* {{ error.$message }}</span>
    </div>
    <!-- Campo InputText --> 
    <div class="form__field width100">
      <InputText
        v-model="nombre"
        class="width100"
        maxlength="500"
        :class="
          v$.nombre.$dirty && v$.nombre.$invalid
            ? 'border-invalid'
            : ''
        "
      />
    </div>
  </div>
</form>

Como podemos ver, para mostrar los mensajes de error se itera directamente sobre el array $errors. El campo $errors contiene los diferentes errores de las validaciones que fallan, y cada uno de ellos contiene el campo $message con el mensaje de error que tenga definido, que es lo que se pintaPodemos 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.