联系表 7 (CF7) 如果填写了其他字段，则为必填字段

Question

我有一个 CF7 表格，要求 name 和 date of birth。

姓名不是必填字段，但如果输入姓名，生日无论如何都是必填项。所以默认不包含出生年月日

CF7 简化代码：

<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>

在第一步中，我研究的事实是该字段也应被 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);
    });
}

一切看起来都是正确的，但提交表单时未检查新的必填字段。有没有人有任何我没有考虑过的建议？

为了安全起见，我还会通过 PHP 在服务器端解决相同的查询，并查看了以下方法。然而，2015年的条目在第一次测试中没有成功，尽管代码仍然类似于今天插件的数据库。

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;
}

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;
}

检查姓名是否为空，出生日期是否为空，然后显示警告消息。

联系表 7 (CF7) 如果填写了其他字段，则为必填字段

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

wordpress

contact-form-7