Como continuar o envio do formulário após uma chamada AJAX?
Desejo validar entradas de usuário em uma postagem do WordPress ao pressionar o botão enviar, exibir uma mensagem de erro se houver problemas e enviar o formulário se tudo estiver correto. Eu tenho uma função PHP que faz a verificação, retornandotrue
se os dados emform_data
está OK, caso contrário, algum código de erro. O JavaScript a seguir emite a solicitação AJAX e deveria continuar enviando o formulário após uma verificação bem-sucedida, mas não:
jQuery(document).ready(function() {
jQuery('#post').submit(function() {
var form_data = jQuery('#post').serializeArray();
var data = {
action: 'ep_pre_submit_validation',
security: '<?php echo wp_create_nonce( 'pre_publish_validation' ); ?>',
form_data: jQuery.param(form_data),
};
var proceed = false;
jQuery.post(ajaxurl, data, function(response) {
if (response.indexOf('true') > -1 || response == true) {
proceed = true;
} else {
alert("Error: " + response);
proceed = false;
}
});
jQuery('#ajax-loading').hide();
jQuery('#publish').removeClass('button-primary-disabled');
return proceed; //breakpoint here makes the code run
});
});
O código é adaptado de umWPSE question, que originalmente não funcionou para mim, pois o formulário não foi enviado. Eu descobri que se a função jQuery vinculada a.submit()
retorna true, o formulário deve ser enviado, e foi isso que tentei implementar. Com o código acima, ele parece não funcionar a princípio (o formulário não é enviado quando não há erros), mas após uma inspeção cuidadosa com o Firebugproceed
parece obter o resultado certo se um ponto de interrupção for inserido noreturn proceed
linha. Funciona como pretendido com dados válidoss se eu esperar um pouco ao atingir o ponto de interrupção e continuar a execução. Se houver erros, o alerta será emitido sem problemas.
Qual a melhor forma de lidar com isto
EDITA
Com base na resposta do @Linus abaixo, o código a seguir funciona com dados válidos e inválidos:
jQuery(document).ready(function() {
jQuery('#post').submit(function() {
if(jQuery(this).data("valid")) {
return true;
}
var form_data = jQuery('#post').serializeArray();
var data = {
action: 'ep_pre_submit_validation',
security: '<?php echo wp_create_nonce( 'pre_publish_validation' ); ?>',
form_data: jQuery.param(form_data),
};
jQuery.post(ajaxurl, data, function(response) {
if (response.indexOf('true') > -1 || response == true) {
jQuery("#post").data("valid", true).submit();
} else {
alert("Error: " + response);
jQuery("#post").data("valid", false);
}
//hide loading icon, return Publish button to normal
jQuery('#ajax-loading').hide();
jQuery('#publish').removeClass('button-primary-disabled');
});
return false;
});
});