Submit elsewhere on page triggers contact form validation

Hello,

Thanks for the feedback!

This is a bug that was introduced in ACF 5.11 version both for the native ACF Form and ACF Extended Form features.

I submitted a bug report on the private ACF Pro Github repo, and it occurs when there are two forms on the same page and one of the two form has at least one required field.

For reference, here is my bug report:

Hello ACF Team!

I would like to report a bug introduced in ACF 5.11. When using 2 ACF front-end forms on the same page with one required field in each one of them, the validation is triggered on both forms. That behavior doesn’t exist in the previous ACF 5.10.2 version.

Here is a video showing the bug

Steps reproduce the issue:

• Create 2 Field Groups with one required Text Field in each one of them
• Create a new page called ACF Form
• Create a new theme file called page-acf-form.php
• Put the following content:

<?php
acf_form_head();
get_header();
?>

<?php if(have_posts()): ?>
    <?php while(have_posts()): the_post(); ?>
        
        <h3>ACF Form 1</h3>
        
        <?php
        acf_form(array(
            'field_groups' => array('group_619a59ee63f58') // Use Field Group 1 key here
        ));
        ?>
        
        <h3>ACF Form 2</h3>
        
        <?php
        acf_form(array(
            'field_groups' => array('group_619a5a2e90d52') // Use Field Group 2 key here
        ));
        ?>
        
    <?php endwhile; ?>
<?php endif; ?>

<?php get_footer(); ?>

The problem come from the introduction of the ensureInvalidFieldVisibility() function within the acf.validation model in ACF 5.11. That function will trigger the browser builtin checkVisibility() validation on all fields on the current page due the wildcard selector $('.acf-field input').

The checkvisibility() will then trigger the ACF Ajax Validation on all required fields, even those of the 2nd form.

In order to fix the issue, we should pass the current element to the function, and only apply checkVisibility() to fields inside the current element’s form. The onInvalid function right above does something similar to add errors to the current element’s form only.

Here is a video with the fix applied

Steps to apply the fix:

In the file /advanced-custom-fields-pro/assets/build/js/acf-input.js:9438:

onClickSubmit: function (e, $el) {

      // pass current $el to the function
      ensureInvalidFieldVisibility($el);

      this.set('originalEvent', e);
},

In the file /advanced-custom-fields-pro/assets/build/js/acf-input.js:9258:

// use current element as argument
var ensureInvalidFieldVisibility = function ($el) {

    // retrieve the current element parents form
    var $form = $el.closest('form');

    // check form exists
    if ($form.length) {

      // find fields inside the current form only
      var $inputs = $form.find('.acf-field input');

      $inputs.each(function () {
        if (!this.checkValidity()) {
          ensureFieldPostBoxIsVisible($(this));
        }
      });
    }
};

I hope they will fix it soon.

Have a nice day!

Regards.