I have an acf_form submitting via AJAX. I understand that acf.validation.toggle has been removed as of 5.7 (why??). I attempted to replace it with acf.unlockForm, and the submission will go through, all the JS code runs and works, except the call to acf.unlockForm.
Why does the form lock itself without any of my code getting thrown in, but requires me to call an unlock on it? I’m guessing because I’m actually handling the AJAX?
What is the best way to have an acf_form printout, with display and validation handled by acf, but I get to hook onto the form to clear only specific fields and things?
This is the slightly anonymized version of what I’m currently doing (in 5.6.10):
<?php
acf_form(array(
'id' => 'FORMNAME_HERE',
'post_id' => 'new_post',
'post_title' => false,
'post_content' => false,
'fields' => array(
'field_x1',
'field_x2',
'field_x3',
'field_x4',
),
'new_post' => array(
'post_type' => 'CPT_HERE',
'post_status' => 'publish'
),
'submit_value' => 'Submit',
'return' => '',
'updated_message' => 'Updated.',
'honeypot' => false
));
?>
<script>
// ready ACF
acf.do_action('ready', $('body'));
// disable the ACF js navigate away pop up
acf.unload.active = false;
// prevent page reload on submit
$('.acf-form').on('submit', function(e){
e.preventDefault();
})
// hook onto the acf submit action, ajaxify
acf.add_action('submit', function($form){
$.ajax({
url: window.location.href,
method: 'post',
data: $form.serialize(),
success: function(data) {
// unlock the form
acf.validation.toggle($form, 'unlock');
// show data
$('.timelog-table tbody').prepend(data);
// remove errors
$('.acf-field').each(function(){
$(this).removeClass('acf-error').find('.acf-error-message').remove();
});
// remove some selected values, keeping others for fast entry
$('#acf-field_x3').val('');
$('#acf-field_x4').val('');
}
});
});
</script>
