I could use some help here. I’ve been troubleshooting this issue tirelessly, but I’m hitting a wall. It seems that CF7 is stubbornly changing the ‘aria’ attribute of my date of birth (DOB) field back to ‘false’, despite my efforts to set it to ‘true’ with a script. Even when I manually change it, it reverts when I click away from the DOB field. My goal is to ensure that users can’t submit the form if the date of birth indicates they’re above 19 years old and have selected Junior radio field. Please note that the dob only appears when Junior radio is selected. Any ideas on how to tackle this? Thannkss!
jQuery(document).ready(function($) {
function getAge(dateString) {
var today = new Date();
var birthDate = new Date(dateString);
var age = today.getFullYear() - birthDate.getFullYear();
var m = today.getMonth() - birthDate.getMonth();
if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
return age;
}
function checkAge() {
var dobField = $('[name="dob"]');
var dobValue = dobField.val();
var membershipValue = $('[name="catmembership"]:checked').val();
var notValidTip = $('<span class="wpcf7-not-valid-tip" aria-hidden="true">You must be 19 years old or below to join the Junior membership.</span>');
var dobErrorLabel = $('#dob-error');
if (membershipValue === "Junior") {
var age = getAge(dobValue);
if (age >= 19) {
dobField.addClass('wpcf7-not-valid wpcf7-not-valid-required error');
dobField.removeClass('valid');
dobField.attr('aria-required', 'true');
dobField.attr('aria-invalid', 'true');
notValidTip.insertAfter(dobField);
dobErrorLabel.show();
} else {
dobField.removeClass('wpcf7-not-valid wpcf7-not-valid-required error');
dobField.addClass('valid');
dobField.attr('aria-required', 'false');
dobField.attr('aria-invalid', 'false');
$('.wpcf7-not-valid-tip').remove();
dobErrorLabel.hide();
}
} else {
dobField.removeClass('wpcf7-not-valid wpcf7-not-valid-required error');
dobField.addClass('valid');
dobField.attr('aria-required', 'false');
dobField.attr('aria-invalid', 'false');
$('.wpcf7-not-valid-tip').remove();
dobErrorLabel.hide();
}
}
$(document).on('change', '[name="dob"]', function() {
checkAge();
});
// Updated event listener for focusout event on the DOB field
$(document).on('focusout', '[name="dob"]', function() {
checkAge();
});
});