Registration Form

<!DOCTYPE html>
<title>My Example</title>

<div class="registration-form-container">
    <div class="registration-form-header">
        <h2>Create an Account</h2>
        <p>Join us and get started today!</p>
    </div>

<form id="registrationForm" action="#" method="post">
        <div class="form-group">
            <label for="reg-email">Email</label>
            <input type="email" id="reg-email" name="email" required autocomplete="email">
        </div>
        
        <div class="form-group">
            <label for="reg-username">Username</label>
            <input type="text" id="reg-username" name="username" required autocomplete="username">
        </div>

<div class="form-group">
            <label for="reg-password">Password</label>
            <input type="password" id="reg-password" name="password" required 
                   autocomplete="new-password" 
                   pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
                   title="Must contain at least one number, one uppercase and lowercase letter, and at least 8 or more characters">
            <p class="password-requirements">8+ characters, with uppercase, lowercase, and numbers.</p>
        </div>
        
        <div class="form-group">
            <label for="reg-password-confirm">Confirm Password</label>
            <input type="password" id="reg-password-confirm" name="password_confirm" required autocomplete="new-password">
        </div>

<div class="form-group-terms">
            <input type="checkbox" id="terms" name="terms" required>
            <label for="terms">I agree to the <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>.</label>
        </div>

<button type="submit" class="submit-btn">Sign Up</button>
        
        <p class="login-link">
            Already have an account? <a href="#">Log in</a>
        </p>
    </form>
</div>

<script>
const registrationForm = document.getElementById('registrationForm');
const passwordInput = document.getElementById('reg-password');
const confirmPasswordInput = document.getElementById('reg-password-confirm');

registrationForm.addEventListener('submit', function(event) {
    if (passwordInput.value !== confirmPasswordInput.value) {
        // Passwords do not match
        confirmPasswordInput.setCustomValidity('Passwords do not match.');
        // Prevent form submission
        event.preventDefault();
    } else {
        // Passwords match, clear any previous validation message
        confirmPasswordInput.setCustomValidity('');
    }
});

// Also, clear the custom validity message when the user starts typing again
confirmPasswordInput.addEventListener('input', function() {
    confirmPasswordInput.setCustomValidity('');
});
</script>