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.
Saul
Agosto 29, 2022Como podría guardar los datos recibidos en el formulario desde mi componente en una BD con una ruta obtenida de laravel
Alex Reimilla
Diciembre 6, 2022Si 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.
Ana
Julio 3, 2023Hola Alex, gracias pero muchas gracias, me ayudó mucho, porque necesitaba validar y yo por lo menos dije bueno poniendo required jejejej. luego vi validaciones en bootstrap y nada, hice un script y creé un botón (me falta aprender mucho, usé getElementById junto a values para capturar el dato de los input) y no lo pude hacer andar. Y gracias a tu código pude validar. Gracias maestro.