Icono del sitio Blog de Programación y Desarrollo – Nube Colectiva

Como Validar un Formulario con Vue JS 3 – Parte 2 (Final)

Demo Github

En la parte anterior llamada Como Validar un Formulario con Vue JS 3 – Parte 1 creamos nuestro proyecto nuevo con Vite JS, realizamos una serie de pasos para que la creación del proyecto Vue JS se despliegue correctamente. Luego pasamos a crear el código HTML para el formulario, usamos Bootstrap 5 (es opcional) y dejamos listo para comenzar la validación con Vue JS. En esta segunda y última parte haremos la validación del formulario, vamos con ello.

Partes

Vue es una framework flexible

Antes de continuar, te invito a leer los siguientes artículos:

Asimismo, te invito a escuchar el Podcast: “Porque Todo Desarrollador Debes Ser Autodidactay “¿ Se Debe Escuchar Música Mientras Se Programa ?” (Anchor Podcast): 

Spotify: Sound Cloud: Apple Podcasts Anchor Podcasts

Bien ahora continuemos con el Post: Como Validar un Formulario con Vue JS 3 – Parte 2 (Final).

JavaScript

Dentro de las etiquetas <script></script> definimos primero los datos a usar:


Para validar el formulario creamos el método validarFormulario(), en este método verificamos si los campos están vacios, si es así enviamos un mensaje de validación:


Por último creamos el método archivoSeleccionado() que verificará si el usuario ha seleccionado un archivo en el campo archivo:


En nuestro formulario HTML llamamos al método validarFormulario() cuando presionemos el botón Enviar y en el campo archivo cuando el usuario elija una imagen, llamamos al método archivoSeleccionado():


Entonces si el usuario presiona el botón Enviar del formular, este le mostrará errores de validación:

Validamos todos los campos del formulario con Vue 3

Y si el usuario ingresa por ejemplo un email, entonces ya no le arrojará el error sobre el email, si no de los otros campos:

El usuario ingreso el email y ya no le muestra mensaje de validación para el email

Bien con esto entonces hemos validado nuestro formulario HTML con Vue JS 3, al inicio de cada Parte del Post he colocado una Demo en donde puedes ver el proyecto en acción, asimismo al inicio de esta 2da y última parte he colocado un enlace al repositorio GitHub en donde he colocado el código del proyecto.

Conclusión

En este tutorial has aprendido a Como Validar un Formulario con Vue JS 3, saber hacerlo es una base para validar formularios más avanzandos. Recuerda que conforme práctiques más, mejorarás en Vue JS 3, como se dice la práctica hace al maestro.

Nota

 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.

Salir de la versión móvil