Conditional required fields for Wordpress Contact Form 7

Question

I know this might be considered off topic but I am not sure where else to post this as it also pertains to WordPress as well as the plugin Contact Form 7. If you know where I should post this other than here please tell me.

---

I am looking to have a conditionally required field. I have found code to work with but I think I am confusing myself and need some outside perspective.

What I need to work is if my check box is checked to "yes" it will make the drop down next to it required and if the check box is checked to "no" it is not required.

This is what I have as my form with the shortcode on the backend:

If you have ordered from us in the past, do you already work with one of our outside sales representatives?
[checkbox* check-sales id:checksales "Yes" "No"]

If you checked "Yes" which representative do you generally deal with?
[select sales-rep id:sales include_blank "Marla" "Lisa" "Wendy" "Stacy" "Nicole" "Linda" "Jody" "Gisele" "Ray" "Craig"]

[submit]

And here is the php code example that goes into the functions.php file.

function is_gmail($email) {  
      if(substr($email, -10) == '@gmail.com') {  
           return true;  
      } else {  
           return false;  
      };  
 };  
 function custom_email_validation_filter($result, $tag) {  
      $type = $tag['type'];  
      $name = $tag['name'];  
      if($name == 'your-email') { // Only apply to fields with the form field name of "your-email"  
           $the_value = $_POST[$name];  
           if(!is_gmail($the_value)){  
                $result['valid'] = false;  
                $result['reason'][$name] = 'This is not a gmail address!'; // Error message  
           };  
      };  
       return $result;  
 };  
 add_filter('wpcf7_validate_email','custom_email_validation_filter', 10, 2); // Email field  
 add_filter('wpcf7_validate_email*', 'custom_email_validation_filter', 10, 2); // Required Email field 

I know this is geared towards email checking. However what I am confusing myself on is what I need to change in order to make this work for a checkbox and a dropdown.

Answer 1

I have found a work around for this that works in IE, Chrome and Firefox. And instead of using php approach decided to utilize jQuery. It is not a complete solution but will work in a pinch for anyone else out there that needs to apply this as well.

<script type="text/javascript">
/*! jQuery script to hide certain form fields */
$(document).ready(function () {

    //Hide the field initially
    $("#hide").hide();

    //Show the text field only when the third option is chosen
    $('#dropdown').change(function () {
        if ($("#dropdown").val() == "Other") {
            $("#hide").show();
            var input = $("#hide");
            if (input.length > 0) { //If the input field contains any value remove it
                input.val('');
            }

        } else {
            $("#hide").hide();
            var input = $("#hide");
            input.val("NA"); //add NA Value to hidden field that is required!

        }
    });
});
</script>

This will add NA to the required field thus bypassing the required check.

Answer 2

This solution worked for me. In my case if the checkbox was checked address was required.

function my_custom_conditional_required($result, $tag) {
    $tag = new WPCF7_Shortcode( $tag );
    $name = $tag->name;
    $value = isset( $_POST[$name] )
        ? trim( wp_unslash( strtr( (string) $_POST[$name], "\n", " " ) ) )
        : '';

    $myCheckbox= $_POST['myCheckbox'][0];

    if( $name == "address" && $myCheckbox== true){
        if ( '' == $value ) :
            $result->invalidate( $tag, 'Address is required.' );
         endif;
    }

    return $result;
}

add_filter( 'wpcf7_validate_text', 'my_custom_conditional_required', 10, 2 );
add_filter( 'wpcf7_validate_text*', 'my_custom_conditional_required', 10, 2 );

Answer 3

I have just encountered this issue for a project and 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/