programacion-web
Version:
validacion-formularios
173 lines (154 loc) • 6.99 kB
HTML
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Validación de Formulario</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="js/lib/validacion.js"></script>
<style>
.error-message {
color: #dc3545;
font-size: 0.875em;
margin-top: 0.25rem;
}
.is-invalid {
border-color: #dc3545 ;
}
</style>
</head>
<body>
<div class="container py-5">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card shadow">
<div class="card-header bg-primary text-white">
<h2 class="h4 mb-0">Formulario de Registro</h2>
</div>
<div class="card-body">
<form id="registroForm">
<!-- Campo Nombre -->
<div class="mb-3">
<label for="nombre" class="form-label">Nombre completo</label>
<input type="text" class="form-control" id="nombre" name="nombre">
<div class="error-message" id="errorNombre"></div>
</div>
<!-- Campo Email -->
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" name="email">
<div class="error-message" id="errorEmail"></div>
</div>
<!-- Campo Contraseña -->
<div class="mb-3">
<label for="password" class="form-label">Contraseña</label>
<input type="password" class="form-control" id="password" name="password">
<div class="error-message" id="errorPassword"></div>
</div>
<!-- Campo Confirmar Contraseña -->
<div class="mb-3">
<label for="confirmPassword" class="form-label">Confirmar Contraseña</label>
<input type="password" class="form-control" id="confirmPassword" name="confirmPassword">
<div class="error-message" id="errorConfirmPassword"></div>
</div>
<!-- Campo Edad -->
<div class="mb-3">
<label for="edad" class="form-label">Edad</label>
<input type="number" class="form-control" id="edad" name="edad">
<div class="error-message" id="errorEdad"></div>
</div>
<button type="submit" class="btn btn-primary">Registrarse</button>
</form>
</div>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const formulario = document.getElementById('registroForm');
formulario.addEventListener('submit', function(e) {
e.preventDefault();
// Obtener valores
const nombre = document.getElementById('nombre').value;
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
const confirmPassword = document.getElementById('confirmPassword').value;
const edad = document.getElementById('edad').value;
// Validar campos
const errores = {
nombre: Validacion.requerido(nombre, 'El nombre') ||
Validacion.minLongitud(nombre, 3, 'El nombre') ||
Validacion.maxLongitud(nombre, 50, 'El nombre'),
email: Validacion.requerido(email, 'El email') ||
Validacion.email(email),
password: Validacion.requerido(password, 'La contraseña') ||
Validacion.minLongitud(password, 8, 'La contraseña'),
confirmPassword: Validacion.coincidir(password, confirmPassword, 'Las contraseñas'),
edad: Validacion.requerido(edad, 'La edad') ||
Validacion.rangoNumerico(parseInt(edad), 18, 99, 'La edad')
};
// Mostrar errores
let formularioValido = true;
for (const campo in errores) {
const elementoError = document.getElementById(`error${campo.charAt(0).toUpperCase() + campo.slice(1)}`);
const elementoInput = document.getElementById(campo);
if (errores[campo]) {
elementoError.textContent = errores[campo];
elementoInput.classList.add('is-invalid');
formularioValido = false;
} else {
elementoError.textContent = '';
elementoInput.classList.remove('is-invalid');
}
}
// Si el formulario es válido
if (formularioValido) {
// Aquí puedes enviar el formulario o hacer lo que necesites
alert('Formulario válido. Enviando datos...');
// formulario.submit(); // Descomentar para envío real
}
});
// Validación en tiempo real (opcional)
formulario.querySelectorAll('input').forEach(input => {
input.addEventListener('blur', function() {
const campo = this.name;
const valor = this.value;
let error = '';
switch (campo) {
case 'nombre':
error = Validacion.requerido(valor, 'El nombre') ||
Validacion.minLongitud(valor, 3, 'El nombre') ||
Validacion.maxLongitud(valor, 50, 'El nombre');
break;
case 'email':
error = Validacion.requerido(valor, 'El email') ||
Validacion.email(valor);
break;
case 'password':
error = Validacion.requerido(valor, 'La contraseña') ||
Validacion.minLongitud(valor, 8, 'La contraseña');
break;
case 'confirmPassword':
const password = document.getElementById('password').value;
error = Validacion.coincidir(password, valor, 'Las contraseñas');
break;
case 'edad':
error = Validacion.requerido(valor, 'La edad') ||
Validacion.rangoNumerico(parseInt(valor), 18, 99, 'La edad');
break;
}
const elementoError = document.getElementById(`error${campo.charAt(0).toUpperCase() + campo.slice(1)}`);
if (error) {
elementoError.textContent = error;
this.classList.add('is-invalid');
} else {
elementoError.textContent = '';
this.classList.remove('is-invalid');
}
});
});
});
</script>
</body>
</html>