Contact Form 7表单验证求助：姓名字段未触发必填校验

问题分析 #

你的姓名字段（Nome/Cognome）已标记为text*必填，但未触发校验，核心原因是自定义的提交按钮禁用逻辑（未勾选第一个同意框时按钮不可点击）干扰了Contact Form 7对文本类必填字段的默认JS校验流程。而tel*/email*字段依赖浏览器原生输入类型校验，所以不受影响。

解决方案 #

1. 确保CF7默认校验脚本正常加载

先确认你的主题或插件没有禁用CF7的核心脚本contact-form-7.js，该脚本是处理text*字段前端校验的基础。

2. 前端JS调整（触发实时校验）

如果你用JS控制提交按钮的禁用/启用，需要在勾选同意框后主动触发姓名字段的校验，同时绑定输入事件实现实时校验：

document.addEventListener('DOMContentLoaded', function() {
  const consentCheckbox = document.querySelector('[name="Trattamentodati"]');
  const submitBtn = document.querySelector('[type="submit"]');
  const requiredTextFields = document.querySelectorAll('[name="Nome"], [name="Cognome"]');

  // 初始状态：未勾选同意则禁用按钮
  submitBtn.disabled = !consentCheckbox.checked;

  // 同意框切换时的处理
  consentCheckbox.addEventListener('change', function() {
    submitBtn.disabled = !this.checked;
    // 勾选后立即校验姓名字段
    if (this.checked) {
      validateTextFields();
    }
  });

  // 姓名字段输入时实时校验
  requiredTextFields.forEach(field => {
    field.addEventListener('input', validateTextFields);
  });

  // 校验逻辑函数
  function validateTextFields() {
    if (!consentCheckbox.checked) return;
    requiredTextFields.forEach(field => {
      if (field.value.trim() === '') {
        field.classList.add('wpcf7-not-valid');
      } else {
        field.classList.remove('wpcf7-not-valid');
      }
    });
  }
});

3. 后端兜底校验（防止绕过前端）

在主题的functions.php中添加自定义校验规则，确保后端也会校验姓名字段的非空：

add_filter('wpcf7_validate_text*', 'custom_required_text_validation', 10, 2);
function custom_required_text_validation($result, $tag) {
  $fieldNames = ['Nome', 'Cognome'];
  if (in_array($tag['name'], $fieldNames)) {
    $fieldValue = isset($_POST[$tag['name']]) ? trim($_POST[$tag['name']]) : '';
    if (empty($fieldValue)) {
      $result->invalidate($tag, '此字段为必填项');
    }
  }
  return $result;
}

内容的提问来源于stack exchange，提问作者Luca Rimediotti