Validación de Formularios con JavaScript
La validación de formularios en el lado del cliente se realiza directamente en el navegador con JavaScript, permitiendo comprobar si los campos están correctamente completados antes de enviarlos. Si algún campo no está correctamente rellenado, se muestra un mensaje de error al usuario, solicitando que lo corrija. Si todos los datos son correctos, el formulario se envía.
Existen diversas maneras de validar formularios con JavaScript, pero el proceso general es similar: acceder a cada campo del formulario, comprobar que los valores son correctos y, si todo está bien, enviar el formulario. A continuación, se presentan tres enfoques diferentes para la validación de formularios:
Ejemplo 1: Capturando el Evento submit
En este ejemplo, capturamos el evento submit del formulario para realizar la validación:
<form action="/login.php" id="formulario">
<p>Usuario: <input type="text" name="usuario" id="usuario"></p>
<p>Clave: <input type="text" name="clave" id="clave"></p>
<input type="submit" value="Entrar">
</form>
<script>
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("formulario").addEventListener('submit', validarFormulario);
});
function validarFormulario(evento) {
evento.preventDefault();
var usuario = document.getElementById('usuario').value;
if(usuario.length == 0) {
alert('No has escrito nada en el usuario');
return;
}
var clave = document.getElementById('clave').value;
if (clave.length < 6) {
alert('La clave no es válida');
return;
}
this.submit();
}
</script>
Ejemplo 2: Mostrando Mensajes de Error en la Página
En este ejemplo, los mensajes de error se muestran en la propia página, mejorando la usabilidad:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Validar</title>
</head>
<body>
<form id="formulario" action="pagina.php" method="post">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre">
<br>
<label for="email">Email:</label>
<input type="text" id="email" name="email">
<br>
<label for="categoria">Categoría:</label>
<select id="categoria" name="categoria">
<option value="">Seleccione una opción</option>
<option value="1">Opción 1</option>
<option value="2">Opción 2</option>
<option value="3">Opción 3</option>
</select>
<br>
<input type="checkbox" id="terminos" name="terminos">
<label for="terminos" class="labelCheck">Acepto los términos y condiciones</label>
<br>
<button type="submit">Enviar</button>
<p id="mensajeError"></p>
</form>
<script>
document.addEventListener("DOMContentLoaded", function () {
const formulario = document.getElementById('formulario');
const mensajeError = document.getElementById('mensajeError');
formulario.addEventListener('submit', function (evento) {
evento.preventDefault();
let nombre = document.getElementById('nombre').value;
let email = document.getElementById('email').value;
let categoria = document.getElementById('categoria').value;
let terminos = document.getElementById('terminos').checked;
if (nombre.trim() === '') {
mensajeError.innerText = 'El campo nombre no puede estar vacío.';
return;
}
if (email.trim() === '') {
mensajeError.innerText = 'El campo email no puede estar vacío.';
return;
}
if (!validarEmail(email)) {
mensajeError.innerText = 'El formato del email no es válido.';
return;
}
if (categoria === '') {
mensajeError.innerText = 'Debes seleccionar una categoría.';
return;
}
if (!terminos) {
mensajeError.innerText = 'Debes aceptar los términos y condiciones.';
return;
}
mensajeError.innerText = '';
formulario.submit();
});
function validarEmail(email) {
const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
}
});
</script>
</body>
</html>
Ejemplo 3: Acceso a Campos por su Nombre
En este ejemplo más antiguo, accedemos a los campos del formulario por su nombre y usamos un botón que llama a una función para validar y enviar el formulario:
<form name="fvalida">
<table>
<tr>
<td>Nombre: </td>
<td><input type="text" name="nombre" size="30" maxlength="100"></td>
</tr>
<tr>
<td>Edad: </td>
<td><input type="text" name="edad" size="3" maxlength="2"></td>
</tr>
<tr>
<td>Interés:</td>
<td>
<select name="interes">
<option value="Elegir">Elegir</option>
<option value="Comercial">Contacto comercial</option>
<option value="Clientes">Atención al cliente</option>
<option value="Proveedores">Contacto de proveedores</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="button" value="Enviar" onclick="valida_envia()"></td>
</tr>
</table>
</form>
<script>
function valida_envia() {
if (document.fvalida.nombre.value.length == 0) {
alert("Tiene que escribir su nombre");
document.fvalida.nombre.focus();
return 0;
}
var edad = document.fvalida.edad.value;
edad = validarEntero(edad);
document.fvalida.edad.value = edad;
if (edad == "") {
alert("Tiene que introducir un número entero en su edad.");
document.fvalida.edad.focus();
return 0;
} else {
if (edad < 18) {
alert("Debe ser mayor de 18 años.");
document.fvalida.edad.focus();
return 0;
}
}
if (document.fvalida.interes.selectedIndex == 0) {
alert("Debe seleccionar un motivo de su contacto.");
document.fvalida.interes.focus();
return 0;
}
alert("Muchas gracias por enviar el formulario");
document.fvalida.submit();
}
function validarEntero(valor) {
valor = parseInt(valor);
if (isNaN(valor)) {
return "";
} else {
return valor;
}
}
</script>
Conclusión
Validar formularios con JavaScript es una tarea esencial que puede realizarse de diversas maneras. Cada enfoque tiene sus ventajas, desde la simple captura del evento submit hasta la mejora de la usabilidad mostrando mensajes de error en la propia página. Estos ejemplos proporcionan una base sólida para implementar validaciones en formularios, asegurando que los datos enviados sean correctos y mejorando la experiencia del usuario.
