仅当表单成功提交时才发生jQuery事件

jQuery event only if form successfully submitted

本文关键字：jQuery 事件 表单 成功 提交      更新时间：2024-04-29

我有一个经过验证的表单。目前，表单发布可能需要长达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');
});

在显示gif之前，使用parsley.js通过显式调用validate来确定表单是否有效。

顺便说一句，小心使用form作为选择器。每页可能有多个表单。如果可能的话，请使用id。

如果您想在请求执行之前显示/隐藏加载框，则不需要使用默认的form.action属性来发布数据。你需要这样做smth：

$('#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');
       })
   }
})
相关文章：