ACF field JS validation before submit

• pierre.debras

• March 25, 2019 at 7:03 pm

I couldn’t find a clean way to custom validate a field with JS before the submit actually happens.

I have a field for which I want to apply custom front-end validation (a button group whose value must be “yes” to allow form submission).

I’ve added an event to the form submit. If the field value is not “yes”, I cancel the event. Great… except the spinner activated by the submit button keeps spinning. Not very user friendly.

Here’s the code :

jQuery("form").submit(function(evt) {
    
    if (document.getElementsByName("acf[field_5c4e7252627ab]")[1].checked) {
        console.log("CHECKED");
    } else {
        console.log("NOT CHECKED");
        evt.preventDefault();
    }
});

Is there a way to properly add JS custom validation ? I’ve read the ACF doc about the JS API but couldn’t find something really helpful there.

Thanks for you help.

• John Huebner

• March 25, 2019 at 11:54 pm

I don’t know if this is possible or not. I don’t see anything in the JS API about this https://www.advancedcustomfields.com/resources/javascript-api/ but then there are probably hooks that haven’t been documented yet if you dig around in the code.

This could be handled by adding a custom validation filter for this field without using JS https://www.advancedcustomfields.com/resources/acf-validate_value/

• pierre.debras

• March 26, 2019 at 1:33 am

Ok, as my page is JS intensive, I was looking for a JS solution. Obviously, I looked at the wrong place. I did what you suggested and it works. Thanks!

Now, this being said, it might be useful to have a way to do this via a JS hook.

Regards,