Событие jQuery только в том случае, если форма успешно отправлена ​​

Question

У меня есть форма, которая имеет валидацию. В настоящее время для отправки формы может потребоваться до 10 секунд. Я хотел бы загрузить load.gif на форму submit. На данный момент проблема связана с загрузкой gif, даже если форма не прошла проверку.

Мне нужен способ, чтобы получить GIF, чтобы загрузить только, если форма действует, вот мой текущий сценарий:

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

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

Answer 1

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

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

использования parsley.js, чтобы определить, действительна ли форма или нет, прежде чем показывать gif, путем явного вызова validate.

В качестве осторожности используйте form в качестве селектора. У вас может быть несколько форм на странице. Если возможно, используйте идентификатор.

Answer 2

Если вы хотите показать/скрыть поле загрузки до выполнения запроса, вам не нужно использовать атрибут 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'); 
     }) 
    } 
})