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 vacios, campos que deben tener cierto numero de caracteres hasta campos con un formato especial.

En este articulo les muestro una forma facil y basica de validar un formulario con Vue.js.

Puede que el codigo este muy basico, pero es necesario para entender mejor 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.