动态禁用联系表 7 字段验证

Question

在我的联系表单 7 中，我有两个单选按钮，根据用户所做的选择显示和隐藏联系表单中的字段。

当您单击“电话”单选按钮时，脚本（JS 而不是 jQuery）会确保电子邮件字段被隐藏并且仅显示电话字段。当您单击电子邮件单选按钮时，电子邮件字段会显示，而电话字段会隐藏。该部分的工作方式完全符合我的要求。

我遇到的问题是我无法弄清楚如何阻止隐藏字段被联系表 7 验证。例如，如果客户只想输入他们的电话号码而不是他们的电子邮件，插件由于未填写电子邮件字段，因此在他们尝试提交时仍然会给他们一个错误。

这里是代码-

JS：

window.onload=radioCheck;

function radioCheck() {
    if (document.getElementById('pcmPhone').checked) {
        document.getElementById('client-phone').style.display = 'block';
        document.getElementById('client-email').style.display = 'none';
        document.getElementById('phone-input').setAttribute("aria-required", "true");
        document.getElementById('email-input').setAttribute("aria-required", "false");
    } else {
        document.getElementById('client-phone').style.display = 'none';
        document.getElementById('client-email').style.display = 'block';
        document.getElementById('phone-input').setAttribute("aria-required", "false");
        document.getElementById('email-input').setAttribute("aria-required", "true");
    }
}

HTML（带有一些联系表格 7 短代码）：

<div class="formFieldWrap">
Name:<br />
[text* client-name]
</div>

<div class="contactPref">
How would you like us to respond?
<br/>
<span class="wpcf7-form-control-wrap cpcm">
<span class="wpcf7-form-control wpcf7-radio" id="cpm">

<span class="wpcf7-list-item">
<input type="radio" id="pcmPhone" id="phone-input" name="cpcm" value="Phone Call" checked="checked" onclick="radioCheck();"/>&nbsp;
<span class="wpcf7-list-item-label">Phone Call</span>
</span>

<span class="wpcf7-list-item">
<input type="radio" id="pcmEmail" id="email-input" name="cpcm" value="E-mail" onclick="radioCheck();"/>&nbsp;
<span class="wpcf7-list-item-label">E-mail</span>
</span>

</span>
</span>
</div>

<div class="formFieldWrap" id="client-phone">
Phone:<br/>
[tel* client-phone]
</div>

<div class="formFieldWrap" id="client-email">
E-mail:<br />
[email* client-email]
</div>

<div class="formFieldWrap">
Message:<br />
[textarea client-message]
</div>

[submit id:contactSub "Send"]

我已尝试更改 aria 所需的属性，正如您在 javascript 中看到的那样，但我遇到了两个问题 - 1) 我使用 JS 更改这些属性的方法不起作用。属性保持设置为 true。 2) 当我在 firebug 中手动将它们更改为 false 时，它​​们仍然以某种方式验证。

所以我的问题是，如何在隐藏表单字段时禁用它？

Answer 1

我也遇到了这个问题。我就是这样解决的。

我正在使用 WPCF7 的过滤器之一在验证发布数据之前对其进行更改：

function alter_wpcf7_posted_data( $data ) {
    if($_POST['cpcm'] == "E-mail") {
        $_POST['tel'] = "Contact by email";
    }
    if($_POST['cpcm'] == "Phone Call") {
        $_POST['tel'] = "Contact by phone";
    }
    return $data;
}
add_filter("wpcf7_posted_data", "alter_wpcf7_posted_data");

这样，WPCF7 的验证阶段会认为隐藏字段实际上已被填写。

注意：我没有专门测试上面的代码，但你应该明白了:)

编辑：上面的代码在你的主题的functions.php文件中

Answer 2

@Digital Brent，你知道了吗？

我认为您可以使用 JS 跳过电子邮件验证

$('#myform').validate({
        ignore: ".wpcf7-list-item"
    });

附：未经测试的代码。

Answer 3

我刚刚在一个项目中遇到了这个问题，选择的答案不能满足我的需求，所以我写了一个小教程来说明我是如何做到的。希望这对将来的任何人都有帮助：

https://wpharvest.com/contact-form-7-custom-fields-validation/

Answer 4

您可以考虑使用Jquery Validation For Contact Form 7 插件。 该插件为 CF7 表单添加了 jQuery 客户端验证（除了新的验证方法等）

因此，您可以通过从输入处方中删除 * 属性来禁用 CF7 后端验证，并使用 jQuery 验证类根据需要设置字段：

[tel client-phone class:required]

正如您提到的，当该字段被隐藏时，它不会被 jQuery 验证验证。 （并且由于该字段没有被*CF7标记，因此后端允许该字段为空）

Answer 5

类似的问题。我用“Conditional Fields for Contact Form 7”修复了

支持必填字段

必填字段可以在隐藏组中使用而不会导致验证问题。 根据可见的组隐藏/显示电子邮件中的信息

现在也可以将条件组添加到电子邮件中。 只需用 [group-name] ... [/group-name] 标签包装内容即可。