Contact Form 7 (CF7) Field required if other field filled - wordpress

Question

I have a CF7-Form that asks for a name and date of birth.
The name is not a required field, but if a name is entered, the birthday is required in any case.
Therefore, the date of birth is not included as required by default.
CF7 Simplified code:
<div class="cf7-conditional-wrapper">
<label>Name [text your-name class:field-a]</label>
<label>Birthday<span class="asterisk-placeholder"></span> [date your-date class:field-b-required-if-a-set]</label>
</div>
In the first step I work on the fact that the field should also be perceived as a required field by CF7.
let cf7_conditional_wrappers = document.getElementsByClassName("cf7-conditional-wrapper");
for (let cf7_conditional_wrapper of cf7_conditional_wrappers) {
let field_a = cf7_conditional_wrapper.getElementsByClassName("field-a")[0],
field_b = cf7_conditional_wrapper.getElementsByClassName("field-b-required-if-a-set")[0],
asterisk_placeholder = cf7_conditional_wrapper.getElementsByClassName("asterisk-placeholder")[0];
if (field_a && field_b && asterisk_placeholder) {
checkRequiredFields(field_a, field_b, asterisk_placeholder);
}
}
function checkRequiredFields(field_a, field_b, asterisk_placeholder) {
let timeout = null;
// Listen for keystroke events
field_a.addEventListener('keyup', function (e) {
clearTimeout(timeout);
timeout = setTimeout(function () {
//console.log('Input Value:', field_a.value);
//console.log('Input Value Length:', field_a.value.length);
if (field_a.value.length > 0) {
// Set Required
field_b.classList.add('wpcf7-validates-as-required');
//field_b.classList.add('wpcf7-not-valid');
field_b.setAttribute("aria-required", "true");
//field_b.setAttribute("aria-invalid", "false");
//field_b.setAttribute("required", "");
//field_b.required = true;
asterisk_placeholder.textContent = "*";
} else {
field_b.classList.remove('wpcf7-validates-as-required');
//field_b.classList.remove('wpcf7-not-valid');
field_b.removeAttribute("aria-required");
//field_b.setAttribute("aria-invalid", "false");
//field_b.removeAttribute("required");
//field_b.required = false;
asterisk_placeholder.textContent = "";
}
}, 1000);
});
}
Everything appears visually to be correct, but the new required field is not checked when the form is submitted.
Does anyone have any tips that I haven't considered?
For safety, I would also solve the same query on the server side via PHP and have looked at the following approach. However, the entry from 2015 was unsuccessful in the first tests, although the code is still similar to that of the plugin's database today.
add_filter( 'wpcf7_validate_date', 'custom_date_confirmation_validation_filter', 20, 2 );
function custom_date_confirmation_validation_filter( $result, $tag ) {
if ( 'birth-date' == $tag->name ) {
$your_birth_date = isset( $_POST['birth-date'] ) ? trim( $_POST['birth-date'] ) : '';
if ( $your_birth_date != '' ) {
$result->invalidate( $tag, "Test to override Required Message" );
}
}
return $result;
}
Example in manual from 2015: https://contactform7.com/2015/03/28/custom-validation/

Answer 1

add_filter( 'wpcf7_validate_date', 'custom_date_confirmation_validation_filter', 20, 2 );
function custom_date_confirmation_validation_filter( $result, $tag ) {
$name = isset( $_POST['name'] ) ? trim( $_POST['name'] ) : '';
if ( 'birth-date' == $tag->name ) {
$your_birth_date = isset( $_POST['birth-date'] ) ? trim( $_POST['birth-date'] ) : '';
if ( trim($name) != '' && trim($your_birth_date) == '' ) {
$result->invalidate( $tag, "Please enter date of birth" );
}
}
return $result;
}
Check if name is not empty and birth date is empty then show warning message.