Javascript 如何在单击“提交”后显示正在加载的gif，但在验证失败时撤消它'；t遇见

我有几张活的表格。我的表单使用jQuery验证器作为前端。我现在有一个方法，可以用加载的gif关闭我的提交按钮。问题是，当验证不满足时，gif将继续，而不会给用户重新提交表单的机会。我已经在下面包含了我的一些代码，非常感谢您的帮助

HTML

---

与用按钮替换gif的回调一起使用。

查看插件文档中的选项：

invalidHandler

选项就是您要查找的

你可以试试这样：

$('.form').validate({ // initialize plugin
    // ignore:":not(:visible)",      
       rules: {
        randomone: {  
          required: true, 
          number: true,
        }, 

        random: { 
          required: true,
          number: false,
        }
      },

      invalidHandler: function(event, validator) {
          RestoreSubmitButton();
      }
});

编辑-工作示例

表格：

<form class='form' action="?" method="post">
<input name="randomone" id="randomone" type="text" />
<input name="random" id="random" type="text"/>
<div id="subbuttonfirst">
     <button class="action submit btn btn-success" >Submit</button>
     <div class="loadbutton">
         loading    
     </div>
</div>
</form>

---

一个有效的

可能是你可以检查form.valid（）是否为真。我需要更改html中的任何内容，或者我的第一个方法，或者我可以在我的验证中调用它吗？我想我只需要找出我需要更改第一个参数2的内容，因为现在它正在破坏我的下一个按钮（这是一个多页表单）它可以工作，但最好避免在html中使用内联js，因此如果您提交表单并启动

ButtonClicked（）

插件内部

submitHandler options

如果您给我5分钟时间，我可以为您提供Fiddle，您可以在我之前链接的文档中看到一个很好的示例，这听起来很棒，很抱歉响应太晚，有多个项目。

 $('.form').validate({ // initialize plugin
   // ignore:":not(:visible)",      
   rules: {
    randomone: {  

      required: true, 
      number: true,

    }, 

    random: { 
      required: true,
      number: false,
    }, 

}
});

$('.form').validate({ // initialize plugin
    // ignore:":not(:visible)",      
       rules: {
        randomone: {  
          required: true, 
          number: true,
        }, 

        random: { 
          required: true,
          number: false,
        }
      },

      invalidHandler: function(event, validator) {
          RestoreSubmitButton();
      }
});

<form class='form' action="?" method="post">
<input name="randomone" id="randomone" type="text" />
<input name="random" id="random" type="text"/>
<div id="subbuttonfirst">
     <button class="action submit btn btn-success" >Submit</button>
     <div class="loadbutton">
         loading    
     </div>
</div>
</form>

$('.form').validate({ // initialize plugin
   // ignore:":not(:visible)",      
   rules: {
      randomone: {  
          required: true, 
          number: true,
      }, 

      random: { 
          required: true,
          number: false,
      }
  }, 

  submitHandler: function(){
      $(".submit").hide();
      $(".loadbutton").show();
  }, 

  invalidHandler: function(){
      $(".submit").show();
      $(".loadbutton").hide();
  }

});