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.