document.addEventListener('DOMContentLoaded', function() {
// Get form elements
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');
// Validation messages
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');
// Validation patterns
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+\$/;
const passwordPattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@\$!%*?&])[A-Za-z\d@\$!%*?&]{8,}\$/;
// Real-time validation
fullNameInput.addEventListener('input', validateName);
emailInput.addEventListener('input', validateEmail);
passwordInput.addEventListener('input', validatePassword);
confirmPasswordInput.addEventListener('input', validateConfirmPassword);
termsCheckbox.addEventListener('change', validateTerms);
// Form submission
form.addEventListener('submit', function(e) {
e.preventDefault();
// Validate all fields
const isNameValid = validateName();
const isEmailValid = validateEmail();
const isPasswordValid = validatePassword();
const isConfirmPasswordValid = validateConfirmPassword();
const isTermsValid = validateTerms();
// If all validations pass
if (isNameValid && isEmailValid && isPasswordValid && isConfirmPasswordValid && isTermsValid) {
// Show loading state
submitBtn.classList.add('loading');
submitBtn.disabled = true;
// Simulate form submission
setTimeout(() => {
alert('Account created successfully!');
form.reset();
clearValidationMessages();
submitBtn.classList.remove('loading');
submitBtn.disabled = false;
}, 2000);
} else {
// Shake invalid fields
shakeInvalidFields();
}
});
// Validate name
function validateName() {
const name = fullNameInput.value.trim();
if (name === '') {
showError(fullNameInput, nameValidation, 'Name is required');
return false;
} else if (name.length < 2) {
showError(fullNameInput, nameValidation, 'Name must be at least 2 characters');
return false;
} else {
showSuccess(fullNameInput, nameValidation, 'Name looks good!');
return true;
}
}
// Validate email
function validateEmail() {
const email = emailInput.value.trim();
if (email === '') {
showError(emailInput, emailValidation, 'Email is required');
return false;
} else if (!emailPattern.test(email)) {
showError(emailInput, emailValidation, 'Please enter a valid email address');
return false;
} else {
showSuccess(emailInput, emailValidation, 'Valid email address!');
return true;
}
}
// Validate password
function validatePassword() {
const password = passwordInput.value;
if (password === '') {
showError(passwordInput, passwordValidation, 'Password is required');
return false;
} else if (password.length < 8) {
showError(passwordInput, passwordValidation, 'Password must be at least 8 characters');
return false;
} else if (!passwordPattern.test(password)) {
showError(passwordInput, passwordValidation, 'Password must contain uppercase, lowercase, number, and special character');
return false;
} else {
showSuccess(passwordInput, passwordValidation, 'Strong password!');
validateConfirmPassword(); // Re-validate confirm password
return true;
}
}
// Validate confirm password
function validateConfirmPassword() {
const password = passwordInput.value;
const confirmPassword = confirmPasswordInput.value;
if (confirmPassword === '') {
showError(confirmPasswordInput, confirmPasswordValidation, 'Please confirm your password');
return false;
} else if (password !== confirmPassword) {
showError(confirmPasswordInput, confirmPasswordValidation, 'Passwords do not match');
return false;
} else {
showSuccess(confirmPasswordInput, confirmPasswordValidation, 'Passwords match!');
return true;
}
}
// Validate terms
function validateTerms() {
if (!termsCheckbox.checked) {
termsValidation.textContent = 'You must agree to the terms and conditions';
termsValidation.className = 'validation-message error';
return false;
} else {
termsValidation.textContent = '';
termsValidation.className = 'validation-message';
return true;
}
}
// Show error
function showError(input, validationElement, message) {
input.classList.remove('valid');
input.classList.add('invalid');
validationElement.textContent = message;
validationElement.className = 'validation-message error';
}
// Show success
function showSuccess(input, validationElement, message) {
input.classList.remove('invalid');
input.classList.add('valid');
validationElement.textContent = message;
validationElement.className = 'validation-message success';
}
// Clear validation messages
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';
}
// Shake invalid fields
function shakeInvalidFields() {
const invalidFields = form.querySelectorAll('.invalid');
invalidFields.forEach(field => {
field.classList.add('shake');
setTimeout(() => {
field.classList.remove('shake');
}, 500);
});
}
});