Reply To: Trigger verification of the form without submitting it

• ninobysa

• August 15, 2018 at 1:39 am

A POST request with a good nonce, the action acf/validate_save_post and the fields data return valuable informations.

{
nonce: acf.o.nonce,
action: 'acf/validate_save_post',
acf[field_id1...]: 'value on the input field_id1...',
acf[field_id2...]: 'value on the input field_id2...'
}

I’ve used it that way :

$("#validation-button").click( function(e) {
   e.preventDefault();
   validateACFinputs($(this.form).serializeArray());
});

function validateACFinputs(form_data) {
   var data = {
      nonce: acf.o.nonce,
      action: "acf/validate_save_post",
      post_id: acf.o.post_id };
   for (const i in form_data) {
      data[form_data[i].name] = form_data[i].value;
   }

   $.post(
      my_ajax_obj.ajax_url, data,
      function(result) {
         errors = result.data.errors
         if (errors === 0) {
            // Code for success
         } else {
            // Code for fail
         }
      }
   );
}

(my_ajax_obj.ajax_url contains the url of admin-ajax.php, if you don’t know what it is, please read the WordPress documentation about admin-ajax.php)

Notes :

• A lazy/inefficient way to display acf errors is to do a .checkValidity() on one of the input, because it seems to cast the whole ACF validation process.
• To verify required but empty fields you need to do it another way, I would suggest the use of checkValidity().
• I may have seen a way to add errors with the Javascript object acf but I haven’t tried it yet.

This remains incomplete compared to the classical behavior when you click on the submit…