Contact Form 7出生日期字段aria属性重置及年龄验证求助

一、修复 aria-required 被重置的问题 #

CF7 会通过内置的动态字段显示/隐藏逻辑自动管理 aria-required 属性，直接手动修改会被框架覆盖。你需要挂钩 CF7 的字段事件，在字段状态更新后同步设置属性：

// 监听CF7字段显示事件，同步设置aria属性
document.addEventListener('wpcf7:field:visible', function(event) {
  // 替换为你的出生日期字段ID
  if (event.target.id === 'dob-field') {
    event.target.setAttribute('aria-required', 'true');
    event.target.required = true;
  }
}, false);

// 监听单选框切换事件，实时同步属性
const juniorRadio = document.querySelector('input[name="membership-type"][value="Junior"]');
const adultRadio = document.querySelector('input[name="membership-type"][value="Adult"]');
const dobField = document.getElementById('dob-field');

if (juniorRadio && dobField) {
  const updateDobAttr = (isJunior) => {
    dobField.setAttribute('aria-required', isJunior ? 'true' : 'false');
    dobField.required = isJunior;
  };

  // 初始化状态
  updateDobAttr(juniorRadio.checked);

  // 单选框切换时更新
  juniorRadio.addEventListener('change', () => updateDobAttr(true));
  adultRadio?.addEventListener('change', () => updateDobAttr(false));
}

二、实现 Junior 选项的年龄验证（禁止19岁以上提交） #

1. 前端即时验证（用户体验优化） #

在表单提交前拦截并检查年龄，阻止非法提交：

document.addEventListener('wpcf7submit', function(event) {
  const form = event.target;
  const isJuniorSelected = form.querySelector('input[name="membership-type"][value="Junior"]').checked;

  if (isJuniorSelected) {
    const dobInput = form.getElementById('dob-field');
    const dobValue = dobInput.value;
    if (!dobValue) return;

    const dob = new Date(dobValue);
    const today = new Date();
    let age = today.getFullYear() - dob.getFullYear();
    const monthDiff = today.getMonth() - dob.getMonth();

    // 精确计算年龄（未到当年生日则减1）
    if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < dob.getDate())) {
      age--;
    }

    if (age > 19) {
      event.preventDefault();
      // 显示自定义错误提示（可替换为CF7的错误提示元素）
      const errorEl = document.createElement('div');
      errorEl.className = 'wpcf7-not-valid-tip';
      errorEl.textContent = 'Junior会员仅允许19岁及以下用户提交';
      dobInput.parentNode.appendChild(errorEl);
      dobInput.focus();
    }
  }
}, false);

2. 后端验证（安全兜底，防止绕过前端） #

前端验证可被篡改，必须在PHP端添加兜底验证：

add_filter('wpcf7_validate', 'junior_membership_age_validation', 10, 2);
function junior_membership_age_validation($result, $tags) {
  $submission = WPCF7_Submission::get_instance();
  if (!$submission) return $result;

  $posted_data = $submission->get_posted_data();
  $membership_type = isset($posted_data['membership-type']) ? $posted_data['membership-type'] : '';
  $dob = isset($posted_data['dob-field']) ? $posted_data['dob-field'] : '';

  if ($membership_type === 'Junior' && !empty($dob)) {
    $dob_date = DateTime::createFromFormat('Y-m-d', $dob);
    if (!$dob_date) {
      foreach ($tags as $tag) {
        if ($tag->name === 'dob-field') {
          $result->invalidate($tag, '请输入有效的出生日期格式');
          break;
        }
      }
      return $result;
    }

    $today = new DateTime();
    $age = $today->diff($dob_date)->y;

    if ($age > 19) {
      foreach ($tags as $tag) {
        if ($tag->name === 'dob-field') {
          $result->invalidate($tag, 'Junior会员仅允许19岁及以下用户提交');
          break;
        }
      }
    }
  }

  return $result;
}

注意事项 #

• 替换代码中所有 membership-type、dob-field 为你实际的字段名称和ID
• 如果使用CF7内置的 visible 语法控制字段显示（如 [date dob-field id:dob-field visible:radio:membership-type:Junior]），上述事件监听会自动适配字段的显示/隐藏状态
• 后端代码需添加到主题的 functions.php 文件或自定义插件中

内容的提问来源于stack exchange，提问作者Jeremi Liwanag