Password Reset Form

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

<div class="password-reset-container">
    <div class="reset-form-header">
        <h2>Set a New Password</h2>
    </div>

<form id="passwordResetForm" action="#" method="post">
        <div class="form-group">
            <label for="new-password">New Password</label>
            <input type="password" id="new-password" name="new_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">Must contain at least one number, one uppercase and lowercase letter, and at least 8 or more characters.</p>
        </div>
        
        <div class="form-group">
            <label for="confirm-password">Confirm New Password</label>
            <input type="password" id="confirm-password" name="confirm_password" required autocomplete="new-password">
        </div>
        
        <button type="submit" class="submit-btn">Reset Password</button>
    </form>
</div>

<script>
const resetForm = document.getElementById('passwordResetForm');
const newPassword = document.getElementById('new-password');
const confirmNewPassword = document.getElementById('confirm-password');

resetForm.addEventListener('submit', function(e) {
    if (newPassword.value !== confirmNewPassword.value) {
        confirmNewPassword.setCustomValidity('Passwords do not match.');
        e.preventDefault(); // Stop form submission
    } else {
        confirmNewPassword.setCustomValidity('');
    }
});

// Clear validation message when user types in the confirm field
confirmNewPassword.addEventListener('input', function() {
    this.setCustomValidity('');
});
</script>