动态禁用联系表7字段验证 [英] Dynamically Disable Contact Form 7 Field Validation

问题描述

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

In my contact form 7 I have two radio buttons that show and hide fields in the contact form depending on the selection made by the user.

当您单击电话收音机时按钮，脚本（不是JS，而不是jQuery）可确保电子邮件字段被隐藏并且仅显示电话字段。当您单击电子邮件单选按钮时，将显示电子邮件字段，而电话字段被隐藏。

When you click on the "phone" radio button, a script (JS not jQuery) makes sure that the email field is hidden and only the phone field is displayed. When you click on the email radio button, the email field shows up and the phone field is hidden. That part is working exactly as I'd like it to work.

我遇到的问题是我不知道如何阻止隐藏字段正在通过联系表格7进行验证。例如，如果客户只想输入他们的电话号码而不是他们的电子邮件，那么由于他们未填写电子邮件字段，因此插件在尝试提交时仍会给他们一个错误。

The problem I'm having is that I can't figure out how to stop the hidden field from being validated by Contact Form 7. For example if a client wants to enter just their phone number and not their email, the plugin will still give them an error when they try to submit since the email field is not filled out.

这是代码-

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简码）：

HTML (with some contact form 7 shortcode):

<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）当我在萤火虫中手动将其更改为false时，它们仍会以某种方式进行验证。

I've tried changing the aria-required attributes as you can see in the javascript but I encountered two problems with this - 1) The method I'm using for changing those attributes with JS is not working. The attributes stay set to true. 2) When I manually change them in my firebug to false, they still validate somehow.

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

So my question is, how can I disable the form field when it is hidden?

推荐答案

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

I just ran in to this problem too. This is how I solved it.

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

I'm using one of WPCF7's filters to alter the posted data before it is validated:

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的验证阶段将认为隐藏字段实际上已被填充。

That way, WPCF7's validation stage will think that the hidden field was in fact filled in.

注意：我没有专门测试上面的代码，但是您应该知道这个主意：）

编辑：上面的代码位于您主题的functions.php文件中

这篇关于动态禁用联系表7字段验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！