聯系表格7(CF7)如果填寫了其他欄位，則必須填寫該欄位

我有一個要求 aname和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/

uj5u.com熱心網友回復：

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

未完全測驗，請檢查 n 讓我知道將更新答案

標籤：

上一篇：`theme(width.1/3)`的Tailwind3寬度計算問題

下一篇：創建一個簡單的插件以在wordpress帖子中顯示ACF（如果存在）