Question

173

Dynamically Disable Contact Form 7 Field Validation

rated 0 times [ 177] [ 4] / answers: 1 / hits: 21079 / 11 Years ago, sat, january 4, 2014, 12:00:00

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.

enter

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

michaelashelbieh

Add To Favorites

Follow

Total Points: 303

Total Questions: 139

Total Answers: 97

Location: Suriname

Member since Sun, Oct 17, 2021

3 Years ago

answered 11 Years ago dustin · Accepted Answer

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