フォームが正常に提出された場合のみjQueryイベント

Question

私は検証済みのフォームを持っています。現在、フォームが投稿されるまでに最大10秒かかることがあります。私は、form submitにload.gifのロードをしたいと思います。私が現時点で持っている問題は、フォームが検証をパスしていなくてもgifの読み込みです。

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

私は検証

Answer 1

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

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

使用するためparsley.jsを使用しています：

私はここに私の現在のスクリプトで、フォームが有効な場合にのみロードするようにGIFを取得する方法が必要ですgifを表示する前にフォームが有効かどうかを明示的に調べて、validateを明示的に呼び出してください。

セレクタとしてformを脇に注意してください。 1ページに複数のフォームがあるかもしれません。可能であれば、代わりにIDを使用してください。

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'); 
     }) 
    } 
})