Validación de un Formulario con Vue.js

Validar formularios siempre es una tarea que se tiene que hacer, desde lo mas clasico de verificar campos vacíos, campos que deben tener cierto numero de caracteres hasta campos con un formato especial. El código es simple y básico, pero aplica para entender como funciona Vue.js.

Incluir Vue.js

Primero vamos a necesitar el vue.js asi que lo usaremos desde su propio CDN.

Este código debe ir en la cabecera de nuestro documento web.

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Formulario HTML

Ahora vamos a crear el formulario, que va en el body o cuerpo de nuestro documento html.

<form id="myform" @submit="validateForm" method="post" action="soluciona.php">
	Nombre: <input type="text" v-model="nombre" name="nombre"><br>
	Apellidos: <input type="text" name="apellidos" v-model="apellidos"><br>
	Email: <input type="text" name="email" v-model="email"><br>
	Telefono: <input type="text" name="telefono" v-model="telefono"><br>
	Direccion: <input type="text" name="direccion" v-model="direccion"><br>
	<input type="submit" value="Guardar" ><br>
</form>

El formulario ya lleva cosas muy interesantes, por ejemplo el parámetro @submit que hace referencia a la función “validateForm”, esta función la debemos definir en los métodos de nuestra instancia de vue.js

Validar Formulario JS

Para validar el formulario vamos a hacer uso de vue.js, es necesario definir las variables para los v-model y el metodo o los métodos necesarios.

<script type="text/javascript">
	var app = new Vue({
  el: '#myform',
  data: {

    nombre: null,
    apellidos: null,
    email: null,
    telefono: null,
    direccion: null,
  },
  methods:{
  	validateForm: function(e){
  		if(!this.nombre){
  			alert("Debes agregar el nombre!");
  		e.preventDefault();
  		}
  		if(!this.apellidos){
  			alert("Debes agregar los apellidos!");
  		e.preventDefault();
  		}
  		if(!this.email){
  			alert("Debes agregar el email! Deben ser mas de 5 caracteres");
  		e.preventDefault();
  		}
  		if(this.email && this.email.length <5){
  			alert("El email debe ser mayor de 5 caracteres");
  		e.preventDefault();
  		}

  		if(!this.telefono){
  			alert("Debes agregar el telefono!");
  		e.preventDefault();
  		}
  		if(!this.direccion){
  			alert("Debes agregar la direccion!");
  		e.preventDefault();
  		}

  	}
  }
})
</script>

El funcionamiento es el siguiente, se verifica cada campo del formulario que no este vacio, si esta vacio entonces se manda una alerta avisando que el campo esta vacio.

En caso de email, en caso de que se asigne un email se verifica que el email tenga mas de 5 caracteres, de lo contrario se manda una alerta.

 

Cada vez que se detecta que una validación no cumple entonces se detiene el comportamiento del formulario, cuando todo esta correcto nos va a dirigir a la url que especifiquemos en el parámetro “action” del formulario.

 


2 Comments

  • Saul

    Agosto 29, 2022

    Como podría guardar los datos recibidos en el formulario desde mi componente en una BD con una ruta obtenida de laravel

    Reply
    • Alex Reimilla

      Diciembre 6, 2022

      Si trabajas con ajax y los componentes son coherentes con el archivo model y los campos del form, no veo que problemas puedas tener. Podrías explicar mejor tu situación.

      Reply

Agregar un comentario