Home Forums Backend Issues (wp-admin) Live validate and populate fields. Not before/after post/save.


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

  • 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.

  • 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 🙂

  • 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 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.

  • 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 🙂

  • 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

  • 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.

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Live validate and populate fields. Not before/after post/save.’ is closed to new replies.