Подія jQuery, лише якщо форма успішно надіслана - javascript, jquery, html, forms

У мене є форма, яка має валідацію. В даний час для публікації форми може знадобитися до 10 секунд. Я хотів би, щоб ви завантажили.gif завантаження форми надіслати. Проблема, яку я маю на даний момент, - це завантаження gif, навіть якщо форма не пройшла перевірку.

Мені потрібен спосіб змусити gif завантажити ТОЛЬКО, якщо форма дійсна, ось мій поточний сценарій:

$("form").submit(function() {
$("#gif").css("visibility", "visible");
return true;
});

Я використовую parsley.js для перевірки

Відповіді:

$("form").submit(function() {
var $form = $(this);
$form.parsley().validate();

if ($form.parsley().isValid())
$("#gif").css("visibility", "visible");
});

Використовуйте parsley.js, щоб визначити, чи правдива форма перед тим, як показати gif, чітко зателефонувавши validate.

Як сторону, будьте обережні, використовуючи form як селектор. Ви можете мати кілька форм на сторінці. Використовуйте замість цього ідентифікатор, якщо можливо.

Якщо ви хочете показати / приховати поле завантаження до виконання запиту, вам не потрібно використовувати за замовчуванням form.action атрибут для публікації даних. Вам потрібно зробити що-небудь таке:

$("#form").submit(function(event) {
/* stop form from submitting normally */
event.preventDefault();
var $form = $(this);
if(this.checkValidity()) { // form validation based on HTML 5
$("#gif").css("visibility", "visible");
/* Send the data using post */
var posting = $.post($form.attr("action"), $form.serialize());
posting.done(function() {
console.log("Request was executed successfully!!!")
}).always(function() {
// hide loading bar in any way on success/error
$("#gif").css("visibility", "hidden");
})
}
})