document.addEventListener('DOMContentLoaded', function() {
const form = document.getElementById('myForm');
const field1 = document.getElementById('ol58bgjx6h6r');
const field2 = document.getElementById('o2upoa150gmc');
const errorMessage = document.getElementById('error-message');
// Function to validate the fields
function validateFields() {
if (field1.value !== field2.value) {
errorMessage.style.display = 'block'; // Show error
field2.setCustomValidity("Values do not match!"); // HTML5 custom validation message
return false; // Validation failed
} else {
errorMessage.style.display = 'none'; // Hide error
field2.setCustomValidity(""); // Clear custom validation message
return true; // Validation passed
}
}
// Add an event listener for form submission
form.addEventListener('submit', function(event) {
if (!validateFields()) {
event.preventDefault(); // Prevent the form from submitting
// Optionally, focus on the second field to draw attention
field2.focus();
}
});
// Optional: Add real-time validation as the user types
field1.addEventListener('keyup', validateFields);
field2.addEventListener('keyup', validateFields);
field1.addEventListener('blur', validateFields); // Validate when field loses focus
field2.addEventListener('blur', validateFields); // Validate when field loses focus
});