草庐IT

javascript - 动态禁用 Contact Form 7 字段验证

coder 2024-12-15 原文

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

当您单击“电话”单选按钮时，脚本(JS 而不是 jQuery)会确保隐藏电子邮件字段并且仅显示电话字段。当您单击电子邮件单选按钮时，将显示电子邮件字段并隐藏电话字段。该部分完全按照我希望的方式工作。

我遇到的问题是我无法弄清楚如何阻止 Contact Form 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-required 属性，如您在 javascript 中所见，但我遇到了两个问题 - 1) 我使用 JS 更改这些属性的方法不起作用。属性保持设置为真。 2) 当我在我的 firebug 中手动将它们更改为 false 时，它​​们仍然以某种方式验证。

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

最佳答案

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

我正在使用 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 文件中

关于javascript - 动态禁用 Contact Form 7 字段验证，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20925237/

javascriptContact34getElementById39formsvalidationcontact-form-7

有关javascript - 动态禁用 Contact Form 7 字段验证的更多相关文章

  1. ruby-on-rails - 如何验证 update_all 是否实际在 Rails 中更新 - 2

    给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息？ 最佳答案 在Rails3中，update_all不返回任何有意义的信息，除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru

  2. ruby - 具有身份验证的私有(private) Ruby Gem 服务器 - 2

    我想安装一个带有一些身份验证的私有(private)Rubygem服务器。我希望能够使用公共(public)Ubuntu服务器托管内部gem。我读到了http://docs.rubygems.org/read/chapter/18.但是那个没有身份验证-如我所见。然后我读到了https://github.com/cwninja/geminabox.但是当我使用基本身份验证(他们在他们的Wiki中有)时，它会提示从我的服务器获取源。所以。如何制作带有身份验证的私有(private)Rubygem服务器？这是不可能的吗？谢谢。编辑:Geminabox问题。我尝试“捆绑”以安装新的gem..

  3. ruby-on-rails - 如果为空或不验证数值，则使属性默认为 0 - 2

    我希望我的UserPrice模型的属性在它们为空或不验证数值时默认为0。这些属性是tax_rate、shipping_cost和price。classCreateUserPrices8,:scale=>2t.decimal:tax_rate,:precision=>8,:scale=>2t.decimal:shipping_cost,:precision=>8,:scale=>2endendend起初，我将所有3列的:default=>0放在表格中，但我不想要这样，因为它已经填充了字段，我想使用占位符。这是我的UserPrice模型:classUserPrice回答before_val

  4. ruby-on-rails - 如何验证非模型(甚至非对象)字段 - 2

    我有一个表单，其中有很多字段取自数组(而不是模型或对象)。我如何验证这些字段的存在？solve_problem_pathdo|f|%>... 最佳答案 创建一个简单的类来包装请求参数并使用ActiveModel::Validations。#definedsomewhere,atthesimplest:require'ostruct'classSolvetrue#youcouldevencheckthesolutionwithavalidatorvalidatedoerrors.add(:base,"WRONG!!!")unlesss

  5. ruby-on-rails - form_for 中不在模型中的自定义字段 - 2

    我想向我的Controller传递一个参数，它是一个简单的复选框，但我不知道如何在模型的form_for中引入它，这是我的观点:{:id=>'go_finance'}do|f|%>Transferirde:para:Entrada:"input",:placeholder=>"Quantofoiganho?"%>Saída:"output",:placeholder=>"Quantofoigasto?"%>Nota:我想做一个额外的复选框，但我该怎么做，模型中没有一个对象，而是一个要检查的对象，以便在Controller中创建一个ifelse，如果没有检查，请帮助我，非常感谢,谢谢

  6. ruby-on-rails - 如何将验证与模型分开 - 2

    我有一些非常大的模型，我必须将它们迁移到最新版本的Rails。这些模型有相当多的验证(User有大约50个验证)。是否可以将所有这些验证移动到另一个文件中？说app/models/validations/user_validations.rb。如果可以，有人可以提供示例吗？ 最佳答案 您可以为此使用关注点:#app/models/validations/user_validations.rbrequire'active_support/concern'moduleUserValidationsextendActiveSupport:

  7. ruby-on-rails - 跳过状态机方法的所有验证 - 2

    当我的预订模型通过rake任务在状态机上转换时，我试图找出如何跳过对ActiveRecord对象的特定实例的验证。我想在reservation.close时跳过所有验证!叫做。希望调用reservation.close!(:validate=>false)之类的东西。仅供引用，我们正在使用https://github.com/pluginaweek/state_machine用于状态机。这是我的预订模型的示例。classReservation["requested","negotiating","approved"])}state_machine:initial=>'requested

  8. ruby - 如何在 Rails 4 中使用表单对象之前的验证回调？ - 2

    我有一个服务模型/表及其注册表。在表单中，我几乎拥有服务的所有字段，但我想在验证服务对象之前自动设置其中一些值。示例:--服务Controller#创建Action:defcreate@service=Service.new@service_form=ServiceFormObject.new(@service)@service_form.validate(params[:service_form_object])and@service_form.saverespond_with(@service_form,location:admin_services_path)end在验证@ser

  9. ruby-on-rails - 在 Rails 和 ActiveRecord 中查询时忽略某些字段 - 2

    我知道我可以指定某些字段来使用pluck查询数据库。ids=Item.where('due_at但是我想知道，是否有一种方法可以指定我想避免从数据库查询的某些字段。某种反拔？posts=Post.where(published:true).do_not_lookup(:enormous_field) 最佳答案 Model#attribute_names应该返回列/属性数组。您可以排除其中一些并传递给pluck或select方法。像这样:posts=Post.where(published:true).select(Post.attr

  10. ruby - 如何验证 IO.copy_stream 是否成功 - 2

    这里有一个很好的答案解释了如何在Ruby中下载文件而不将其加载到内存中:https://stackoverflow.com/a/29743394/4852737require'open-uri'download=open('http://example.com/image.png')IO.copy_stream(download,'~/image.png')我如何验证下载文件的IO.copy_stream调用是否真的成功——这意味着下载的文件与我打算下载的文件完全相同，而不是下载一半的损坏文件？documentation说IO.copy_stream返回它复制的字节数，但是当我还没有下

随机推荐