防止表单提交 jQuery [重复]答案

【问题标题】：Prevent form from submitting jQuery [duplicate]防止表单提交 jQuery [重复]
【发布时间】：2020-11-12 18:37:58
【问题描述】：

在我的表单中，用户必须输入 4 个值来生成乘法表。

为了验证用户的输入，我使用了 jQuery。如果输入无效（空白、非整数等），则会显示错误消息。 “提交”按钮应仅在输入有效时才起作用。

我用它来阻止表单提交（来源：Preventing a form from submitting in jQuery Validate plugin's submitHandler function）：

$("#inputForm").submit(function(generateTable) {
   generateTable.preventDefault();
}).validate({
   //code
});

这里是 validate.js 文件：

function generateTable() {
   //code
   return false;
}

$(function() {
   $("#inputForm").submit(function(e) {
      e.preventDefault();
   }).validate({
      //rules
      //messages
});

这是 HTML 文件：

<form id="inputForm" class = 'card p-3 bg-light' class="form-horizontal" onsubmit="return generateTable();">

问题是即使输入无效，表单也会被提交。如何防止表单被提交？

【问题讨论】：

你的问题是？
@ScottMarcus 抱歉，我不清楚，即使输入无效，我的表单也会被提交。 preventDefault 不起作用
@KaanCetinkaya 抱歉，我不清楚，即使输入无效，我的表单也会被提交。 preventDefault 不起作用
您设置了两个不同的submit 处理程序。 JavaScript 中的那个看起来是正确的，但是您还有一个内联处理程序，应该将其删除。 onsubmit="return generateTable();"
@ScottMarcus 如果我删除了内联处理程序，那么当我单击提交按钮时，它不会做任何事情。那我应该如何调用 generateTable() 函数呢？

标签： javascript jquery

【解决方案1】：

提交函数不需要调用，如下使用即可。

$("#inputForm").validate({
    rules: {
        "name": {
            required: true,
            minlength: 5
        },
        "email": {
            required: true,
            email: true
        }
    },
    messages: {
        "name": {
            required: "Please, enter a name"
        },
        "email": {
            required: "Please, enter an email",
            email: "Email is invalid"
        }
    },
    submitHandler: function (form) { // for demo
        alert('valid form submitted'); // for demo
        return false; // for demo
    }
});

See this fiddle here

【讨论】：