document.addEventListener('DOMContentLoaded', function() {
// Obtener elementos del formulario
const form = document.getElementById('registrationForm');
const fullNameInput = document.getElementById('fullName');
const emailInput = document.getElementById('email');
const passwordInput = document.getElementById('password');
const confirmPasswordInput = document.getElementById('confirmPassword');
const termsCheckbox = document.getElementById('terms');
const submitBtn = document.getElementById('submitBtn');
// Mensajes de validación
const nameValidation = document.getElementById('nameValidation');
const emailValidation = document.getElementById('emailValidation');
const passwordValidation = document.getElementById('passwordValidation');
const confirmPasswordValidation = document.getElementById('confirmPasswordValidation');
const termsValidation = document.getElementById('termsValidation');
// Patrones de validación
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+\$/;
const passwordPattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@\$!%*?&])[A-Za-z\d@\$!%*?&]{8,}\$/;
// Validación en tiempo real
fullNameInput.addEventListener('input', validateName);
emailInput.addEventListener('input', validateEmail);
passwordInput.addEventListener('input', validatePassword);
confirmPasswordInput.addEventListener('input', validateConfirmPassword);
termsCheckbox.addEventListener('change', validateTerms);
// Envío del formulario
form.addEventListener('submit', function(e) {
e.preventDefault();
// Validar todos los campos
const isNameValid = validateName();
const isEmailValid = validateEmail();
const isPasswordValid = validatePassword();
const isConfirmPasswordValid = validateConfirmPassword();
const isTermsValid = validateTerms();
// Si todas las validaciones pasan
if (isNameValid && isEmailValid && isPasswordValid && isConfirmPasswordValid && isTermsValid) {
// Mostrar estado de carga
submitBtn.classList.add('loading');
submitBtn.disabled = true;
// Simular envío del formulario
setTimeout(() => {
alert('¡Cuenta creada con éxito!');
form.reset();
clearValidationMessages();
submitBtn.classList.remove('loading');
submitBtn.disabled = false;
}, 2000);
} else {
// Sacudir campos inválidos
shakeInvalidFields();
}
});
// Validar nombre
function validateName() {
const name = fullNameInput.value.trim();
if (name === '') {
showError(fullNameInput, nameValidation, 'El nombre es obligatorio');
return false;
} else if (name.length < 2) {
showError(fullNameInput, nameValidation, 'El nombre debe tener al menos 2 caracteres');
return false;
} else {
showSuccess(fullNameInput, nameValidation, '¡El nombre se ve bien!');
return true;
}
}
// Validar email
function validateEmail() {
const email = emailInput.value.trim();
if (email === '') {
showError(emailInput, emailValidation, 'El email es obligatorio');
return false;
} else if (!emailPattern.test(email)) {
showError(emailInput, emailValidation, 'Por favor ingrese una dirección de email válida');
return false;
} else {
showSuccess(emailInput, emailValidation, '¡Dirección de email válida!');
return true;
}
}
// Validar contraseña
function validatePassword() {
const password = passwordInput.value;
if (password === '') {
showError(passwordInput, passwordValidation, 'La contraseña es obligatoria');
return false;
} else if (password.length < 8) {
showError(passwordInput, passwordValidation, 'La contraseña debe tener al menos 8 caracteres');
return false;
} else if (!passwordPattern.test(password)) {
showError(passwordInput, passwordValidation, 'La contraseña debe contener mayúsculas, minúsculas, número y carácter especial');
return false;
} else {
showSuccess(passwordInput, passwordValidation, '¡Contraseña fuerte!');
validateConfirmPassword(); // Revalidar confirmar contraseña
return true;
}
}
// Validar confirmar contraseña
function validateConfirmPassword() {
const password = passwordInput.value;
const confirmPassword = confirmPasswordInput.value;
if (confirmPassword === '') {
showError(confirmPasswordInput, confirmPasswordValidation, 'Por favor confirme su contraseña');
return false;
} else if (password !== confirmPassword) {
showError(confirmPasswordInput, confirmPasswordValidation, 'Las contraseñas no coinciden');
return false;
} else {
showSuccess(confirmPasswordInput, confirmPasswordValidation, '¡Las contraseñas coinciden!');
return true;
}
}
// Validar términos
function validateTerms() {
if (!termsCheckbox.checked) {
termsValidation.textContent = 'Debe aceptar los términos y condiciones';
termsValidation.className = 'validation-message error';
return false;
} else {
termsValidation.textContent = '';
termsValidation.className = 'validation-message';
return true;
}
}
// Mostrar error
function showError(input, validationElement, message) {
input.classList.remove('valid');
input.classList.add('invalid');
validationElement.textContent = message;
validationElement.className = 'validation-message error';
}
// Mostrar éxito
function showSuccess(input, validationElement, message) {
input.classList.remove('invalid');
input.classList.add('valid');
validationElement.textContent = message;
validationElement.className = 'validation-message success';
}
// Limpiar mensajes de validación
function clearValidationMessages() {
const inputs = [fullNameInput, emailInput, passwordInput, confirmPasswordInput];
const validationElements = [nameValidation, emailValidation, passwordValidation, confirmPasswordValidation];
inputs.forEach(input => {
input.classList.remove('valid', 'invalid');
});
validationElements.forEach(element => {
element.textContent = '';
element.className = 'validation-message';
});
termsValidation.textContent = '';
termsValidation.className = 'validation-message';
}
// Sacudir campos inválidos
function shakeInvalidFields() {
const invalidFields = form.querySelectorAll('.invalid');
invalidFields.forEach(field => {
field.classList.add('shake');
setTimeout(() => {
field.classList.remove('shake');
}, 500);
});
}
});