javascript 动态禁用联系表 7 字段验证
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20925237/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamically Disable Contact Form 7 Field Validation
提问by Digital Brent
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.
在我的联系表单 7 中，我有两个单选按钮，它们根据用户所做的选择显示和隐藏联系表单中的字段。
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.
当您单击“电话”单选按钮时，脚本（JS 而非 jQuery）会确保隐藏电子邮件字段并仅显示电话字段。当您单击电子邮件单选按钮时，将显示电子邮件字段而隐藏电话字段。那部分的工作方式与我希望的工作方式完全一样。
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.
我遇到的问题是我不知道如何阻止隐藏字段被联系表 7 验证。例如，如果客户只想输入他们的电话号码而不是他们的电子邮件，插件仍然会给出他们在尝试提交时出错，因为电子邮件字段未填写。
Here is the code -
这是代码 -
JS:
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 (with some contact form 7 shortcode):
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();"/>
<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();"/>
<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"]
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.
我已经尝试更改 aria-required 属性，正如您在 javascript 中看到的那样，但我遇到了两个问题 - 1) 我用来通过 JS 更改这些属性的方法不起作用。属性保持设置为 true。2）当我在我的萤火虫中手动将它们更改为 false 时，它们仍然以某种方式进行验证。
So my question is, how can I disable the form field when it is hidden?
所以我的问题是，如何在隐藏表单字段时禁用它？
采纳答案by Splashdust
I just ran in to this problem too. This is how I solved it.
我也刚遇到这个问题。我就是这样解决的。
I'm using one of WPCF7's filters to alter the posted data before it is validated:
我正在使用 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");
That way, WPCF7's validation stage will think that the hidden field was in fact filled in.
这样，WPCF7 的验证阶段就会认为隐藏字段实际上已填写。
Note: I haven't tested the code above specifically, but you should get the idea :)
注意：我没有专门测试上面的代码，但你应该明白:)
Edit: The above code goes in the functions.php file of your theme
编辑：上面的代码在你的主题的functions.php文件中
回答by Rocky IWS
@Digital Brent, did you figure it out already?
@Digital Brent，你已经弄清楚了吗？
I think you can skip email validation using JS
我认为您可以使用 JS 跳过电子邮件验证
$('#myform').validate({
ignore: ".wpcf7-list-item"
});
P.S. Untested code.
PS未经测试的代码。
回答by Dragos Micu
I have just encountered this issue for a project and the answer selected wasn't satisfying my needs, so I've written a little tutorial on how I've done it. Hope this helps anyone in the future:
我刚刚在一个项目中遇到了这个问题，选择的答案不能满足我的需求，所以我写了一个关于我是如何做到的小教程。希望这对未来的任何人都有帮助：
https://wpharvest.com/contact-form-7-custom-fields-validation/
https://wpharvest.com/contact-form-7-custom-fields-validation/
回答by David Horák
You can consider to use the Jquery Validation For Contact Form 7plugin. This plugin adds jQuery client side validation for CF7 forms (beside new validation methods, etc.)
您可以考虑使用Jquery Validation For Contact Form 7插件。该插件为 CF7 表单添加了 jQuery 客户端验证（除了新的验证方法等）
So then you can disable CF7 back-end validation by removing *attribute from input prescription and use jQuery validation class to set the field as required:
因此，您可以通过*从输入处方中删除属性来禁用 CF7 后端验证，并使用 jQuery 验证类根据需要设置字段：
[tel client-phone class:required]
As you mentioned when the field is hidden it's not being validated by jQuery validation. (And because the field is not marked by *CF7 allows this field be empty on the back-end)
正如您提到的，当该字段被隐藏时，它不会被 jQuery 验证所验证。（并且由于该字段未标记为*CF7 允许该字段在后端为空）
回答by ozayo
Similar problem. I fixed with "Conditional Fields for Contact Form 7"
类似的问题。我修复了“联系表格 7 的条件字段”
Support for required fields
Required fields can be used inside hidden groups without causing validation problems. Hide/show info in emails based on what groups are visible
Conditional groups can now be added to the emails as well. Just wrap the content with [group-name] ... [/group-name] tags.
支持必填字段
可以在隐藏组中使用必填字段而不会导致验证问题。根据可见的组隐藏/显示电子邮件中的信息
现在也可以将条件组添加到电子邮件中。只需用 [group-name] ... [/group-name] 标签包装内容。
