Getting Crazy with ACF Conditionals

[et_pb_section admin_label=”section”][et_pb_row admin_label=”row”][et_pb_column type=”4_4″][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”left” text_font_size=”14″ use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

I’ve been working on a project lately that makes extensive use of Advanced Custom Fields (ACF) and the post object / taxonomy field types in particular. As my last blog entry outlined, it integrates VERY nicely with the REST API for custom field validation and population. With 50+ fields or sub-fields (in flexible content and repeater fields) on a single custom post type field group, it’s not surprising that conditional logic would be an essential element to show/hide subsets of the field based on user selection. Unfortunately out of box, ACF is limited to choosing select or radio button field types with the conditional logic option.

[/et_pb_text][et_pb_image admin_label=”Image” src=”https://idealienstudios.com/wp-content/uploads/acf_conditional_example.jpg” alt=”ACF Conditional Example – Only Select / Radio Button Fields” show_in_lightbox=”on” url_new_window=”off” animation=”off” sticky=”on” align=”center” force_fullwidth=”off” always_center_on_mobile=”on” use_border_color=”off” border_color=”#ffffff” border_style=”solid”] [/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row admin_label=”Row”][et_pb_column type=”1_2″][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”left” text_font_size=”14″ use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

I asked a question about this to the ACF Support team as there is a long-running forum thread related to this feature / capability / issue:

Is there a method to get conditional logic to support non-select / non-radio-button field types (taxonomy, number, post object, flexible content, repeater, etc)?

[/et_pb_text][/et_pb_column][et_pb_column type=”1_2″][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”left” text_font_size=”14″ use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

Their response gave me an excellent reference point to build out from

[/et_pb_text][et_pb_blurb admin_label=”Blurb” url=”https://www.advancedcustomfields.com/resources/adding-custom-javascript-fields/” url_new_window=”off” use_icon=”off” icon_color=”#7EBEC5″ use_circle=”off” circle_color=”#7EBEC5″ use_circle_border=”off” circle_border_color=”#7EBEC5″ icon_placement=”top” animation=”top” background_layout=”light” text_orientation=”left” use_icon_font_size=”off” header_font_size=”18″ body_font_size=”14″ use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

Unfortunately, you need to create custom JS code to do that. What you need to do is watching the changed value and then add the selected field with the “hidden-by-conditional-logic” class. To learn how to add JS code for custom fields, please check this page.

[/et_pb_blurb][/et_pb_column][/et_pb_row][et_pb_row admin_label=”Row”][et_pb_column type=”4_4″][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”left” text_font_size=”14″ use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

As with many development tasks, learning / building the first instance of the solution can be the most time-consuming, so I thought I’d document the exact solution for my use-case here in hopes that it may help others that want to implement conditional logic / validation for (m)any ACF field type.

The High-Level Plan

1. Add the class “hidden-by-conditional-logic” to any field you want hidden by default
2. Enqueue JS on your admin CPT and/or front-end form
3. Use the acf.add_action(‘ready’) function to
   • Bind change events matching your field name / type
   • Identify the default display state for existing ACF values on page load
4. Add_filter for acf/validate_value/name= to ensure required fields that are displayed through this JS-based approach still validate according to conditional logic state.

ACF documentation does an exceptional job at covering adding custom javascript to fields so my gists below only cover the last 2 items.

https://gist.github.com/Idealien/b6cb1c5be9f858d37160c6e3eb0b3fd1

[/et_pb_text][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”left” text_font_size=”14″ use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

While it may not be as sexy as the ACF UI approach, it really isn’t too much code. Until a future version of ACF extends conditional display to all field types, this is a quite manageable workaround.

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]