Live validate and populate fields. Not before/after post/save.

• TimR

• October 17, 2018 at 12:38 am

Hey all,

I’ve found all the ACF filters and actions. Which are all nice, but I can’t find the following.
I want to validate, and more important, populate a field right after entering and leaving the field. Not after posting (or before post is saved).

For example, I have a repeater field “time” with a sub-field of “time_start” and “time_end”. I want to be able to do two things. The first point is most important. The second one be, as backup, validated before saving the post.

Question 1
When I exit/deselect the “time_start” field, after populating it, I want to check if “time_end” has a value. If not than auto populate it with (“time_start” +1 hour). Why? Sometimes you go through a lot scrolling to get that one date in half a year. And then redo it again with “time_end”. It’s way more user friendly to help the user and auto populate it after entering “time_start”.

Question 2
Al tough I think I can do this with “acf/validate_value”, I would like to live validate “time_end” after editing/deselecting it. It would make no sense have and end time earlier than it starts.

Question 3
Can I show/hide (collapse) acf fields while editing a post, based on acf checkbox?
For example, every “time” subfield has a “location” field. But it would make no sense entering them all repeatedly if they all have the same location.
In other words. If field “location_all_the_same” is true, hide field “time”->”location”. And show field “location_same” (not in repeater field “time”).

Any pointers are more than welcome.

• TimR

• October 17, 2018 at 1:18 am

Question 3 is answered. But I was unable to edit my post.
Answer to that simply is conditional logic in the field settings. Never saw this option before 🙂

• John Huebner

• October 17, 2018 at 5:00 am

1 & 2 would require building custom JS. There are some topics here on validating date fields, however, most of the conversations pertain to the old ACF JS API. ACF 5.7 has a completely rebuild JS API https://www.advancedcustomfields.com/resources/javascript-api/. ACF also uses the jquery date picker fields. Most of what you’ll need to do will mean adding actions to the date picker fields. Sorry I can’t be of more help on this one, but there really is not a lot of resources I can point you. Everything I’m finding is for the old JS version.

• TimR

• October 17, 2018 at 5:11 am

Hey John, thanks for your reply. Yeah, I’ve found that page 🙂
Unfortunately has has near to none examples. I’ve been playing with it for a few hours now.

Don’t really know how to get it running. But in the old JS API it was written to use something like:
add_action('acf/input/admin_enqueue_scripts', 'my_admin_enqueue_scripts');
found here

I’m first trying to get an JS alert() or console.log() to see when I trigger something. Not much luck so far. append_field and load field did work.

I guess when I find out the right trigger I can start validating an populating 🙂

• John Huebner

• October 17, 2018 at 5:30 am

Unfortunately, the JS documentation has always been a little light here. It’s up to us to figure it out and help others if we’re inclined to do so.

I did manage to find and old thread dealing with auto filling an end date based on the start date. The information is for the old JS, but it does show the basics of dealing with date fields. Some of it should still be valid https://support.advancedcustomfields.com/forums/topic/autocomplete-end-date-when-start-date-is-selected-in-jquery-date-picker/

• TimR

• October 17, 2018 at 6:08 am

Now, that’s a good starting point and learning material. That bit of code explained a lot to me.

Tweaked it a bit to get it working with acf 5. Also added an if because it threw an error when var date was not populated. And added a delete end date if start date is not populated.

var start_date_key = 'field_5bc62ed0bbcd1'; // the field key of the start date
var end_date_key = 'field_5bc62eeabbcd2'; // the field key of the end date

if ( acf.get('acf_version') != 'undefined') {

    // add an action for all datepicker fields
    acf.addAction('date_time_picker_init', function( $input, args, field ){
        // get the field key for this field
        var key = $input.closest('.acf-field').data('key');
        // see if it's the start date field
        if (key == start_date_key) {

            // add action to start date field datepicker
            $input.datepicker().on('input change select', function(e) {
                // get the selected date
                var date = jQuery(this).datepicker('getDate');

                // check if date has a value
                if ( date != null ) {
                    // add 5 days to date
                    date.setDate(date.getDate() + 5);
                    // set end date
                    jQuery('[data-key="' + end_date_key + '"] input.hasDatepicker').datepicker('setDate', date);
                }
                // if start date field datepicker has no value, delete end date field datepicker
                else if ( date == null ) {
                    jQuery('[data-key="' + end_date_key + '"] input.hasDatepicker').datepicker('setDate', null);
                }
            });
        }
    //};
    });
}

Later I’ll tweak some things. For example, I would just like to populate end date IF it has no value. And my actual date fields are on a nested repeater field 🙂 Hmm plus how to throw an error warning when the value is wrong. Anyway, things for tomorrow.

Many thanks @hube2 ! This was very informative.