This question had been asked a lot of times, but I still confused where I made a mistake. I need to validate form by ajax and submit it if everything is ok. Here is my code:
$('#tl_form form').on('submit',function(e) {
var $form = $(this);
if($form.attr('validated')){
//Here the form should be send IMHO, but "return true" don't do it somehow:
console.log('ok'); // I can just see this 'ok' in console.
return true;
}
$.ajax({
type: "POST",
data: $form.serialize() + '&action=validate_tl_form',
url: ajaxurl,
success: function(data) {
if (data.success) {
$form.attr('validated',true).submit();
} else {
console.log('error');
}
},
});
return false;
});I would recommend to re-work your logic.
If you are submitting the entire form to the server anyway for validation, the server might as well simply accept it when it is valid, instead of sending "it is valid" to the client and expecting a form re-post.
You can show a validation hint on the client when the form was not valid.
$('#tl_form form').on('submit', function (e) {
e.prenventDefault();
$.post($(this).attr('action'), $(this).serialize()).done(function (data) {
if (data.success) {
// go to next step/page
} else {
// show validation hint
}
});
});
e.prenventDefault(); prevents that the browser submits the form the regular way, since you're sending it via Ajax.