Dynamically Disable Contact Form 7 Field Validation

Question

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.

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.

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.

Here is the code -

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

<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"]

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?

Answer 1

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:

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.

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

Answer 2

@Digital Brent, did you figure it out already?

I think you can skip email validation using JS

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

P.S. Untested code.

Answer 3

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/

Answer 4

You can consider to use the Jquery Validation For Contact Form 7 plugin. This plugin adds jQuery client side validation for CF7 forms (beside new validation methods, etc.)

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:

[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)

Answer 5

Similar problem. I fixed with "Conditional Fields for Contact Form 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.