Support

Account

Home Forums Front-end Issues ACF form validation messages not showing in safari

Solving

ACF form validation messages not showing in safari

    • mikael

    • February 15, 2021 at 8:46 am

    Hello!

    I have made a frontend form using the acf_form acf_form_head functions for creating new posts in a CPT. Everything works fine on that part. I have an issue with validation error messages on safari. The validation works fine and no post is created if not all the required fields have value. But when submitting a post and it validates and finds an error it does not show the acf-notice error at all, just plain default browser highlighting for the closest input that needs value. It works fine on chrome,firefox,ie and edge.

    This is not only a issue on the frontend form but even in wp-admin the error messages are not rendered.

    As far as i can see the acf-notice error does not render at all, i cant find it in the DOM when in safari. I have been trying to debug it but without any success. I have no javascript errors, i have tried disabling plugins, updating WordPress to different versions and bunch of other stuff without any success.

    I tried setting up a required field on another local WordPress website and there it renders out the validation error message on safari. So i have no idea what the problem is, anyone has had this issue before on safari?

    Have a attached some pictures showing my issues, The first two are on the frontend form and the other two are inside the wp-admin.

    my ACF form function if that helps:

      acf_form(array(
                'echo' => false,
                'return' => '/projects/?updated=1',
                'updated_message' => false,
                'post_id'		=> 'new_post',
                'post_title'	=> false,
                'post_content'	=> false,
                'new_post'		=> array(
                    'post_type'		=> 'project',
                    'post_status'	=> 'publish',
                ),
                'submit_value'  => __('Create project')
            ));
    • mikael

    • February 16, 2021 at 8:48 pm

    So i have done some additional digging and found out that the validation message appears on Safari if you use any field that is not a field type of Text or Text Area. As soon as you add a field type Text or Text Area it does not validate properly with the ACF error messages, just plain standard Safari html validation “Fill out this field”. I can see that no kind of javascript is fired in the dom to add specific classes such as is-invalid in the form or find any acf notices.

    This is how the form markup looks like when validation error occurs on Chrome, firefox, IE11, Edge:
    <form id="acf-form" class="acf-form is-invalid" action method="post">

    This is how the form markup looks like when validation error occurs on Safari:
    <form id="acf-form" class="acf-form" action method="post">

    I have tried this on a clean WP installation with only ACF to really exclude any other conflict. So the issue seem to be with validation of field types Text and Text Area where the javascript does not fire off.

    Anyone else keen to reproduce this and check? My conclusion is that this is a bug in ACF.

    By the way the forum system is very buggy it seems. This is my 10th time trying to submit a reply.

  • I’m facing same issue,
    Any solution?

  • I have no way of testing on safari.

    Have you eliminated the theme as the cause.

  • This reply has been marked as private.
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.