首页 文章

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

提问于
浏览 次
6

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

enter image description here

当您单击“手机”单选按钮时，脚本（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:

[text* client-name]
</div>

<div class="contactPref">
How would you like us to respond?


<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:

[tel* client-phone]
</div>

<div class="formFieldWrap" id="client-email">
E-mail:

[email* client-email]
</div>

<div class="formFieldWrap">
Message:

[textarea client-message]
</div>

[submit id:contactSub "Send"]

我已经尝试更改了aria-required属性，你可以在javascript中看到但我遇到了两个问题 - 1）我用来改变JS属性的方法不起作用 . 属性保持设置为true . 2）当我在我的firebug中手动将它们更改为false时，它们仍以某种方式验证 .

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

javascript forms validation contact-form-7

4 回答

  • 0

    我也遇到了这个问题 . 这就是我解决它的方式 .

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

    回复于
  • 4

    @Digital Brent，你有没有想出来？

    我想你可以使用JS跳过电子邮件验证

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

    附：未经测试的代码 .

    回复于
  • 3

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

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

    [tel client-phone class:required]

    正如您在隐藏字段时提到的那样，jQuery验证未对其进行验证 . （并且因为字段没有标记 * CF7允许此字段在后端为空）

    回复于
  • 0

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

    支持必填字段必需的字段可以在隐藏组中使用，而不会导致验证问题 . 根据可见的组隐藏/显示电子邮件中的信息条件组现在也可以添加到电子邮件中 . 只需使用[group-name] ... [/ group-name]标签包装内容 .

    回复于

相关问题