Question

我有一些表格现场直播。我的表单使用jQuery验证器作为前端。我现在有一个方法，用加载的gif切换我的提交按钮。问题是，当不符合验证时，gif会继续，而不是让用户有机会重新提交表单。我在下面提供了一些代码，感谢任何帮助。

HTML

 <div id="subbuttonfirst">
            <button onclick="anothermethod.local.submit(this.form); ButtonClicked();" class="action submit btn btn-success" >Submit</button>

JS（替换功能）

<script type="text/javascript">


function ButtonClicked()
{
   document.getElementById("subbuttonfirst").style.display = "none"; // to undisplay
   document.getElementById("loadbutton").style.display = ""; // to display
   return true;
}
var FirstLoading = true;
function RestoreSubmitButton()
{
   if( FirstLoading )
   {
      FirstLoading = false;
      return;
   }
   document.getElementById("subbottonfirst").style.display = ""; // to display
   document.getElementById("loadbutton").style.display = "none"; // to undisplay
}
// To disable restoring submit button, disable or delete next line.
document.onfocus = RestoreSubmitButton;
</script>

jQuery验证：

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

      required: true, 
      number: true,

    }, 

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

}
});

Answer 1

使用带有回调的invalidHandler替换带按钮的gif。

Answer 2

查看插件文档中的选项：code 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>

js代码

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

});

工作http://jqueryvalidation.org/validate

如何在单击提交后显示加载gif，但如果不符合验证则撤消它

2 个答案: