表单错误时如何防止 jQuery .submit 触发答案

【问题标题】：How to prevent jQuery .submit from firing when form errors表单错误时如何防止 jQuery .submit 触发
【发布时间】：2019-09-20 08:41:24
【问题描述】：

我有一个 PDF 表单网关。用户提交表单，然后通过电子邮件接收 PDF 并将其重定向到 PDF url。我遇到的问题是，当所需的表单字段为空时，重定向似乎有效。在将用户重定向到 PDF 之前，我简要地看到了字段错误消息。我错过了什么吗？

这与Using JQuery - preventing form from submitting 不同。如果未填写必填字段，则 jQuery .submit() 和其中的内容不应该做任何事情。我添加了.preventDefault()，但在未填写必填字段的情况下单击提交按钮时它仍然会触发。

问题在于jQuery(location).attr('href', productDownloadFile) 行。如果没有填写正确的字段，这不应该发生。

我的代码：

jQuery('#gform_5').submit(function (e) {
    e.preventDefault();

    var pathname = window.location.pathname;
    jQuery.cookie('cookie-name', pathname, {path: pathname}); // Set cookie to prevent multiple form entries.

    // Close modal on form submit and redirect to the PDF.
    setTimeout(function() {
        jQuery('.pdf-gateway').removeClass('is-visible');
        jQuery(location).attr('href', productDownloadFile); // productDownloadFile set in functions.
    }, 3000);
});

【问题讨论】：

Using JQuery - preventing form from submitting的可能重复
在这些字段上使用 HTML5 'required' 属性。
好像表单是通过AJAX提交的。在继续您的函数调用之前，您需要挂钩该 AJAX 响应并查看它是否成功。无论表单是否有效，您当前都在执行您的代码。此外，e.preventDefault() 将停止浏览器提交表单，但不会停止附加到 submit 事件的其他 JavaScript 处理程序。

标签： jquery forms

【解决方案1】：

关于我的评论，这里有一个更详细的答案。

为防止表单提交时必填字段留空，请在这些字段上设置required 属性：

<input type="text" required />

这将告诉浏览器在尝试提交父表单时显示一条消息。除此之外，您可能还想在后端捕获表单提交不完整的情况，以避免在源代码被操纵或浏览器出于任何原因无法处理所需属性时出现不一致的数据！最好的情况是使用像 MVC 框架这样的框架，其中required 状态在模型中给出，从该模型中构建表单/模板并处理保存数据。这是因为如果有些东西你不想编辑多个东西，尤其是大型 js 文件。

旁注：您提供的答案包含添加所需属性的 js。这是不好的做法。如果在其他地方存在阻止脚本正确执行的错误，这将导致比错误本身更多的错误。如果可能的话，不要用 javascript 修复糟糕的源代码！

【讨论】：

感谢您的澄清。

【解决方案2】：

好的，感谢上面 xcy7e 的评论，问题似乎是我正在使用重力形式，而不是添加通常的“必需”属性，而是添加了“data-required='true'”。使用jQuery('[aria-required="true"]').attr('required', 'required'); 解决了这个问题

【讨论】：