带有加载微调器的 jQuery 验证

Posted 2023-05-09

【中文标题】带有加载微调器的 jQuery 验证

【英文标题】：jQuery validation with loading spinner

【发布时间】：2014-12-07 11:34:24

【问题描述】：

所以我知道很多关于 Jquery 验证库和页面加载微调器的问题都被单独询问过，我可以让这两个项目独立工作，但是我在使用这两个项目时并没有取得很大的成功。

简而言之，我有一个使用 jQuery 验证库的电子邮件表单。当按下“发送”时，我希望加载 GIF（已经在页面上，但 display: none）在控制器执行其业务时变得可见（但前提是字段有效）。据我所知，在根据documentation 验证页面后，我需要使用.valid()，但是它需要首先运行.validate()。如果我通过以下方式解决问题，表单会在 GIF 播放之前提交：

<script>$("#emailForm").validate();</script>
<script>
    $("#Send").click(function () 
        if($("#emailForm").valid())  $(".loaderWheel").show(); 
    );
</script>

如果我这样处理，即使表单无效，GIF 也会变得可见，并且永远不会再次消失：

<script>$("#emailForm").validate();</script>
<script>
    $("#Send").click(function () 
        $(".loaderWheel").show();
        if(!$("#emailForm").valid())  $(".loaderWheel").hide(); 
    );
</script>

如何使 GIF 仅在表单有效且回发页面加载时可见？

【问题讨论】：

是#Send 和提交按钮还是通过ajax 提交？

#Send 是提交按钮。

当您提交表单时，会离开页面，因此永远不会显示微调器。我假设您的控制器正在执行return View()，但这会返回一个新页面，而不是您当前所在的页面。

好的，那么我应该对我的结构进行哪些更改？没错，在发送时，它会转到一个 HttpPost ActionResult 方法，该方法返回带有状态（确认、失败）消息的相同视图。

我不确定您为什么要这样做，但如果您 submit the form via ajax，那么您将留在同一页面上

【参考方案1】：

尝试覆盖验证器中的 submitHandler 方法。它仅在表单有效时执行。所以，这个或类似的东西应该可以工作。检查文档。

$().ready(function() 
  $("#profile").validate(
    submitHandler: function(form) 
      $("#spinner").show();
      form.submit();
    ,
    rules: 
      f_firstName: 
        required  : true,
        minlength : 2
      ,
      f_lastName: 
        required  : true,
        minlength : 2
      ...