如果验证失败，如何停止表单提交[重复]

Posted 2023-02-24

【中文标题】如果验证失败，如何停止表单提交[重复]

【英文标题】：How to stop Form submit if the validation fails [duplicate]

【发布时间】：2016-05-30 23:17:15

【问题描述】：

更新： 我的问题更多关于How to prevent the form submit if the validation fails

链接不能解决我的问题

只需重申我正在做的事情： 我有一个带有一堆输入字段的表单，当用户点击提交按钮时，如果表单验证失败，它会使用属性required="required" 验证表单然后我想停止提交表单，因为你看到了当用户显示 div 的 javascript提交表单。

希望这一切都解决了。

结束更新

如果表单验证失败，如何阻止表单提交触发？

<input class="form-control" data-val="true" id="SerialNumber" name="SerialNumber" required="required" type="text">

<button type="submit" name="rsubmit" class="btn btn-success">Submit</button>

 //loading message:
 $("form").submit(function (e) 
     $("#loading").show();
 ); 

【问题讨论】：

尝试return false;

我应该把return false;放在哪里

见***.com/questions/9347282/…

感谢您的链接，但您发布的链接是关于“阻止表单提交”，但我只想在验证失败时阻止

见checkValidity():***.com/questions/5929186/…

【参考方案1】：

如果验证失败，你需要做两件事，e.preventDefault() 和返回 false。

对于您的示例，在给定输入的情况下，伪代码可能是下一个：

$("form").submit(function (e) 
   var validationFailed = false;
   // do your validation here ...
   if (validationFailed) 
      e.preventDefault();
      return false;
   
); 

【参考方案2】：

我能够解决问题：

首先在你的页面上添加 ref：

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js"></script>

然后做这个检查：

        $("form").submit(function () 
            if ($(this).valid())   //<<< I was missing this check
                $("#loading").show();
            
        );

【讨论】：

为什么这么复杂？为什么要同时使用 jquery.validate 和 jquery.validate.unobtrusive ？

复杂是什么意思？你的意思是我可以使用任何一个 .js ？

不，我只是不知道您的上下文，可能是您出于某种原因需要它。我会说给出的数据 - 你不需要它。

这正是我所需要的。我的代码已被破坏数周，用户提交了无效数据。我正在使用这个愚蠢的检查：if (!this.checkValidity() || !this.reportValidity()).

简化：脚本“jquery.validate.unobtrusive.min.js”不是必需的，“jquery.validate.js”就足够了

【参考方案3】：

像这样在表单的 onsubmit 处理程序上编写验证代码

<form onsubmit="return Validation()">
    <input class="form-control" data-val="true" id="SerialNumber" name="SerialNumber" required="required" type="text">

    <button type="submit" name="rsubmit" class="btn btn-success">Submit</button>

    <script>
        function Validation()
        //Do all your validation here
        //Return true if validation is successful, false if not successful
        //It will not submit in case of false.
        return true or false;
        
    </script>
</form>

【讨论】：

这不是一个好方法。您必须阻止表单提交，而不是单击按钮。如果您按 ENTER - 表单将在您的处理程序之外提交。

是的，好点。我稍微更改了我的代码以考虑您的情况。