jQuery събитие, само ако формулярът е изпратен успешно - javascript, jquery, html, forms

Имам форма, която има валидиране. Понастоящем формулярът може да отнеме до 10 секунди. Бих искал да има load.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");
})
}
})