Last active
May 4, 2022 05:37
-
-
Save hwkdev/6302e2ecddcc6e3a6150fabc4e8cae6c to your computer and use it in GitHub Desktop.
Article: https://hwk.fr/blog/acf-creer-un-formulaire-de-connexion-inscription-en-ajax-grace-acf-form
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* ACF Form: Prevent default form submit | |
*/ | |
jQuery(document).on('submit', '.acf-form', function(e) { | |
e.preventDefault(); | |
}); | |
/** | |
* ACF Form: Init | |
*/ | |
jQuery(document).ready(function($) { | |
/** Check ACF */ | |
if(typeof acf === 'undefined') | |
return; | |
/** Add style for Datepicker */ | |
$(".hasDatepicker").addClass("form-control"); | |
/** Clean errors before checking validation again */ | |
acf.addAction('validation_begin', function($form) { | |
$form.find('.acf-error-message').remove(); | |
}); | |
/** Add field errors */ | |
acf.addAction('invalid_field', function(field) { | |
var $field = field.$el; | |
$field.find('.acf-notice.-error').insertAfter($field.find('.acf-input-wrap')); | |
}); | |
/** Make ACF Form use "formdata" instead of classic submission */ | |
acf.addAction('submit', function($form) { | |
var formdata = new FormData($form[0]); | |
$.ajax({ | |
url: window.location.href, | |
type: 'post', | |
data: formdata, | |
cache: false, | |
processData: false, | |
contentType: false, | |
success: function(response){ | |
// Form: Reset | |
acf.validation.reset($form); | |
if(!response.data) | |
return false; | |
// Form: Invalid | |
if(!response.success){ | |
$form.prepend('<div class="acf-error-message -error">' + response.data.error + '</div>'); | |
$('html, body').animate({ | |
scrollTop: $form.offset().top - 150 | |
}, 500); | |
return false; | |
} | |
// Form: Valid | |
// Message | |
if(response.data.data.message){ | |
$form.prepend('<div class="acf-error-message -success">' + response.data.data.message + '</div>'); | |
$('html, body').animate({ | |
scrollTop: $form.offset().top - 150 | |
}, 500); | |
} | |
// Redirect | |
if(response.data.data.redirect) | |
window.location = response.data.data.redirect; | |
} | |
}); | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment