Estás viendo una versión antigua de esta página. Ve a la versión actual.

Comparar con el actual Ver el historial de la página

Versión 1 Siguiente »


En construcción

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.

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 cuando hacemos submit, podemos capturar el 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.

  • Sin etiquetas