Validación de Formularios Utilizando Vue

Los formularios son parte de la mayoría de las aplicaciones web actuales. Permiten recibir datos de los usuarios para luego validarlos y poder interactuar con ellos.
En este artículo voy a mostrar cómo trabajar con formularios en Vue. Comenzaré creando uno simple y usaré la directiva v-model para mantener sincronizada la entrada del usuario con el modelo de datos. También utilizaré modificadores, los cuales permiten cambiar el comportamiento predeterminado del manejo de eventos del navegador. Y los filtros, que permiten formatear la salida que ve el usuario. Finalmente implementaré las validaciones del mismo.

Requisitos del formulario

En primer lugar se nos muestra el formulario con el subtítulo indicando que se complete.
A continuación, una serie de campos de entrada para ser rellenados por el usuario y un selector con tres opciones .

Al pulsar el botón de registro se envía el formulario.
Antes de ser enviado, este se intercepta para ser validado.
De haber errores, estos se muestran en un mensaje.

Al elegir cierta opción del selector se hace visible un nuevo campo.
Este también debe ser validado.

Una vez se han validado todos los campos correctamente, el formulario se envía.
Se muestra un aviso informando al usuario del correcto funcionamiento.

Implementación del formulario

La aplicación está compuesta por un archivo index.html con la estructura del formulario, un archivo validar-vue.js con la lógica del programa y un style.css con los estilos a aplicar.

Campos del formulario

En index.html se implementan los distintos campos. Tenemos dos input de tipo texto para el nombre y los apellidos y otros dos de tipo email y password. Adicionalmente tenemos otro para seleccionar el medio de transporte. Además de un input de tipo submit para enviar el formulario.

<div class="input-form">
	<label for="name">Nombre</label>                
	<input type="text" name="name" v-model="name">
</div>
<div class="input-form">
	<label for="secondName">Apellidos</label>
	<input type="text" name="secondName" v-model="secondName">
</div>
<div class="input-form">
	<label for="email">Dirección de email</label>
	<input type="email" name="email" v-model="email">
</div>
<div class="input-form">
	<label for="password">Elija contraseña</label>
	<input type="password" name="password" v-model="password">    
</div>
<div class="input-form">
	<label for="choice">Medio de transporte:</label>
		<select name="choice" v-model="choice">
			<option value="-1">Elija:</option>
			<option v-for="option in meansTransport" 
                    v-bind:value ="option.value">
       				{{option.text}}
			</option>
        </select>
</div>

Utilizamos la directiva v-model en los elementos input y select para conectar de manera bidireccional los datos de entrada de nuestro usuario y nuestro modelo de datos dentro de la aplicación Vue, lugar en el cual inicializamos los datos, los cuales son tomados como fuente de verdad.

data: {
        name: null,
        secondName: null,
        email: null,
        password: null,
        choice: -1
}

Usamos la directiva v-for para representar la lista de elementos del array que contiene los medios de transporte que podemos selecionar. Con v- bind:value logramos enlazar el valor seleccionado por el usuario con el valor contenido en «option.value», en lugar de que la propia cadena sea tomada como el valor en sí.

data: {
        meansTransport: [
            {text:'Autobús', value: 1},
            {text:'Tren', value: 2},
            {text:'Automóvil', value: 3}
        ]
}

Campo condicional

Al seleccionar una de las opciones del apartado anterior (la opción ‘Automóvil’ en este caso), queremos que aparezca un campo adicional que permita introducir la matrícula. Esto lo implementamos utilizando la directiva v-if = «inputVisible». En el caso de que esta devuelva como valor true, se mostrará todo lo contenido en esta etiqueta.

<div class="input-form" v-if="inputVisible">
	<label for="matricula">Matrícula</label>
	<input type="text" name="matricula" v-model="matricula">    
</div>

Ahora sólo hay que inicializar la variable matricula e implementar lo que se conoce como propiedad computada ‘inputVisible‘ para que devuelva true en el caso de que se haya seleccionado la opción 3. Añadimos a nuestro código JavaScript lo siguiente:

data: {
    matrícula : null
},
computed: {
	inputVisible() {
    	return this.choice == 3;
    }
}

Avisos para el usuario

Para facilitar la comunicación con el usuario, visualizamos tres tipos de mensajes dependiendo del estado en el que se encuentra el formulario. En un estado inicial se mostrará un mensaje indicando que se debe completar el mismo. En otro estado se detalla una lista con los errores que se hayan detectado. Y en el caso de que todo esté correcto, se informa que ha sido enviado.

Para manejar los distintos mensajes dependientes de los distintos estados, haremos uso de las directivas v-if y v-else, del atributo submited, de la propiedad computada hasErrors, así como de la directiva v-for y el array errors para mostrar los errores de validación por pantalla.

<div v-if="submitted === true">
	<div v-if="hasErrors" class="error">
		<strong>Se han producido los siguientes errores:</strong>
		<ul>
			<li v-for="error in errors">{{ error }}</li>
		</ul>
	</div>
	<div v-else class="correcto">
		<strong>Enviado!</strong>
	</div>
</div>
<div v-else class="nocompleto">
	<strong>Completa este formulario</strong>
</div>

Al archivo JavaScript habría que añadirle las siguientes líneas de código:

data : {
    errors: [],
	submitted: false;	
}
computed : {
    hasErrors: function(){
        return this.errors.length; // Devuelve true en el caso de contener                                       algún error
    }
}

Validación

Al ser enviado el formulario, debemos capturar el evento y hacer una comprobación de los datos antes de terminar de ejecutar el envío. Esto lo hacemos mediante la directiva v-on: , junto al manejador de eventos submit (@submit abreviado), el modificador .prevent y ejecutando el método «checkForm» de la siguiente forma:

<form id="app" @submit.prevent="checkForm" action="/registro" method="post">

En el método «checkForm» además de incluir la lógica para la validación, al atributo submitted se le asigna el valor true para indicar que ya ha sido completado.

    methods: {
        checkForm: function(e) {
            this.submitted = true;
        }
    }

Lógica de validación

Para que el método checkForm devuelva true, debe cumplir una serie de condiciones, esto es que los atributos name, secondName, email y password sean distintas de null.

if (this.name && this.secondName && this.email && this.password){
     return true;                
}

Validación de un campo condicional

Además hay que añadirle el método validateChoice, el cual devolverá false en el caso en el que el atributo choice sea igual a -1 o siendo este igual a 3, el atributo matricula no contenga ningún valor.

if (this.name && this.secondName && this.email && this.password && 			this.validateChoice()){
    return true;                
}
validateChoice: function() {
	if (this.choice == -1 || (this.choice == 3 && !this.matricula)) {
		return false;
	}else return true;
}

Expresión regular

En último lugar se comprueba que el formato de correo electrónico es el correcto. Esto lo logramos testando una simple expresión regular.

data : {
	expression : /\w+@\w+\.+[a-z]/
}
if (this.name && this.secondName && this.email && this.password && 			this.validateChoice() && this.expression.test(this.email)){
    return true;                
}

Mensajes de error

Finalmente si no se cumple alguna condición, esta se almacena en el array errors para ser visualizada en pantalla.

checkForm: function(e) {
    if (this.name && this.secondName && this.email && this.password && 			this.validateChoice() && this.expression.test(this.email)){
        return true;                
    }            
    if (!this.name) this.errors.push('Nombre requerido');
    if (!this.secondName) this.errors.push('Apellido requerido');
    if (!this.email) this.errors.push('Email requerido');
    if (!this.password) this.errors.push('Password requerido');
    if (this.choice == -1) this.errors.push('Medio de transporte 				requerido');
	if (this.choice == 3 && !this.matricula) this.errors.push('Matrícula 		 requerida');
    if (!this.expresion.test(this.email)) this.errors.push('Formato de 			email incorrecto')
}

Código

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form reg Vue</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script defer src="validar-vue.js"></script>
</head>

<body>
    <section class="form">
        <h1>Formulario</h1>
        <form id="app" @submit.prevent="checkForm" action="/registro" method="post">

            <div v-if="submitted === true">
                <div v-if="hasErrors" class="error">
                    <strong>Se han producido los siguientes errores:</strong>
                    <ul>
                        <li v-for="error in errors">{{ error }}</li>
                    </ul>
                </div>
                <div v-else class="correcto">
                    <strong>Enviado!</strong>
                </div>
            </div>

            <div v-else class="nocompleto">
                <strong>Completa este formulario</strong>
            </div>

            <div class="input-form">
                <label for="name">Nombre</label>                
                <input type="text" name="name" v-model="name">
            </div>
            <div class="input-form">
                <label for="secondName">Apellidos</label>
                <input type="text" name="secondName" v-model="secondName">
            </div>

            <div class="input-form">
                <label for="email">Dirección de email</label>
                <input type="email" name="email" v-model="email">
            </div>

            <div class="input-form">
                <label for="password">Elija contraseña</label>
                <input type="password" name="password" v-model="password">    
            </div>

            <div class="input-form">
                <label for="choice">Medio de transporte:</label>
                <select name="choice" v-model="choice">
                    <option value="-1">Elija:</option>
                    <option v-for="option in meansTransport" v-bind:value="option.value">
                        {{option.text}}
                    </option>

                </select>
            </div>

            <div class="input-form" v-if="inputVisible">
                <label for="matricula">Matrícula</label>
                <input type="text" name="matricula" v-model="matricula">    
            </div>


            <div class="submit">
                <input type="submit" value="Registrarse">
            </div>
        </form>
    </section>
    <script src="validar.js"></script>
</body>

</html>

let validar = new Vue ({
    el: '#app',
    data: {
        errors: [],
        name: null,
        secondName: null,
        email: null,
        password: null,
        choice: -1,
        matricula: null,
        submitted: false,
        expression: /\w+@\w+\.+[a-z]/,
        meansTransport: [
            {text:'Autobús', value: 1},
            {text:'Tren', value: 2},
            {text:'Automóvil', value: 3}
        ]
    },
    computed: {
        hasErrors: function(){
            return !!this.errors.length;
        },
        inputVisible() {
            return this.choice == 3;
        }
    },
    methods: {
        checkForm: function(e) {
            this.errors = [];
            this.submitted = true;

            if (this.name && this.secondName && this.email && this.password && this.validateChoice() && this.expression.test(this.email)){
                 return true;                
            }
            
            if (!this.name) this.errors.push('Nombre requerido');
            if (!this.secondName) this.errors.push('Apellido requerido');
            if (!this.email) this.errors.push('Email requerido');
            if (!this.password) this.errors.push('Password requerido');
            if (this.choice == -1) this.errors.push('Medio de transporte requerido');
            if (this.choice == 3 && !this.matricula) this.errors.push('Matrícula requerida');
            if (!this.expresion.test(this.email)) this.errors.push('Formato de email incorrecto')
        },
        validateChoice: function() {
            if (this.choice == -1 || (this.choice == 3 && !this.matricula)) {
                return false;
            }else return true;

        }
    }  
});

body {
    font-size: x-large;
}
.form {
    max-width: 400px;
    margin: 0 auto;
}
.input-form {
	
	padding-top: 15px;
}
.input-form input,select {
    width: 100%;
    
}
.submit {
    padding-top: 20px;
}
.error {
    background-color: red;
    color: white;
}
.correcto {
    background-color: green;
    color:white;
    padding: 15px;
}
.nocompleto {
    background-color: gray;
    color: white;
}

Requisitos del formulario

Implementación del formulario

Campos del formulario

Campo condicional

Avisos para el usuario

Validación

Lógica de validación

Validación de un campo condicional

Expresión regular

Mensajes de error

Código

Interacciones con los lectores

Deja una respuesta Cancelar la respuesta