阻止表单提交js

在Web开发中，阻止表单提交是一个常见的需求，通常用于在用户提交表单前进行表单验证，确保所有必填字段都已正确填写，或者在某些条件下阻止表单提交，比如网络请求未完成时。

基础概念

在JavaScript中，可以通过监听表单的submit事件，并在事件处理函数中调用event.preventDefault()方法来阻止表单的默认提交行为。

应用场景

表单验证：检查用户输入是否符合要求，如邮箱格式、必填字段等。
异步操作：在提交表单前需要进行异步请求，如检查用户名是否已存在。
条件提交：根据某些条件决定是否允许表单提交，如用户权限检查。

示例代码

以下是一个简单的示例，展示如何使用JavaScript阻止表单提交，并进行简单的表单验证：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止表单提交示例</title>
<script>
function validateForm(event) {
    // 获取表单元素
    var input = document.getElementById('myInput');
    // 检查输入是否为空
    if (input.value.trim() === '') {
        alert('输入不能为空');
        // 阻止表单提交
        event.preventDefault();
    }
}

// 绑定表单提交事件
window.onload = function() {
    var form = document.getElementById('myForm');
    form.addEventListener('submit', validateForm);
};
</script>
</head>
<body>
<form id="myForm" action="/submit_form" method="post">
    <input type="text" id="myInput" name="myInput">
    <button type="submit">提交</button>
</form>
</body>
</html>

在这个示例中，我们在表单提交时调用validateForm函数进行验证。如果输入为空，则显示警告信息并阻止表单提交。

解决问题的方法

如果你遇到了阻止表单提交后无法再次提交的问题，可能是因为事件处理函数中的逻辑没有正确处理。确保在验证通过后，表单可以正常提交。如果是异步操作，确保在异步操作完成后，根据结果决定是否提交表单。

如果遇到阻止表单提交后页面刷新或跳转的问题，确保在事件处理函数中调用了event.preventDefault()来阻止默认行为。

总之，通过合理使用JavaScript事件监听和preventDefault方法，可以有效地控制表单提交的行为，提升用户体验和应用的数据处理能力。

页面内容是否对你有帮助？

有帮助

没帮助

使用jQuery验证提交表单(&V)

、、、

我正在使用validate.js来验证表单。如果表单未通过验证，则在用户尝试提交表单时会显示一条消息，并显示错误。如果用户通过验证，则会弹出一条成功消息。问题是，表单实际上并不发送/执行操作，因为validate.js阻止了默认行为。阻止表单发送的代码是： event.preventDefault(); } e

浏览 2提问于2012-07-25得票数 0

1回答

jquery代码在提交表单之前为表单分配一个验证，如果缺少某些内容，则触发一个sweetalert。在第一次单击表单的submit按钮后，jquery验证生效并触发警报。由于存在提交错误，gravity forms现在也会显示验证错误。当填写所有必填字段并再次单击同一提交按钮时，jquery验证将不再分配给该按钮，也不会触发任何警报。为什么会这样呢？JS代码，它工作得很好，唯一的问题是，当表单处于验证错误状态时，它不再分配给重力表单

浏览 15提问于2019-11-13得票数 0

回答已采纳

3回答

谷歌铬提交表单，即使没有提交按钮

、、

但是，如果您在chrome上按enter，则不管输入类型是否提交，它都会提交。我的问题是，这是chrome的默认特性/错误，还是我做错了什么。？

浏览 4提问于2010-08-04得票数 6

2回答

从HTML表单调用javascrpt方法时，不会调用XMLHttpRequest.onreadystatechange

、

xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");} 在我需要该函数的情况下，它是从HTML表单调用的</tr> </td></table> 为什么在第一种情况下不调用onreadystatecha

浏览 48提问于2020-06-30得票数 0

1回答

使用JQuery提交JSF表单并调用服务器端函数

、、

我可以使用以下代码提交JSF生成的表单：但是我想在提交表单之前处理JS代码，所以我在button中添加了commandButton类型的onClick="test();&quo

浏览 2提问于2012-12-18得票数 1

回答已采纳

3回答

从表单内的按钮触发的getJSON

、、

我很难理解为什么我必须将触发getJSON方法的按钮放在表单之外才能让请求工作。如果按钮放在表单中，则getJSON方法不返回任何结果。

浏览 2提问于2010-05-05得票数 2

回答已采纳

1回答

您可以覆盖单个提交的表单吗？

我有一个表单，它生成一些自定义财务报告(不能使用视图)。它有一些典型的表单元素、一个结果表和三个提交按钮: Submit、Reset和Download。Drupal.behaviors.formSingleSubmit = { .on('submit.singleSubmit&#

浏览 0提问于2020-04-17得票数 3

1回答

如何限制某些url - Laravel的表单提交

、

如果我想阻止从下面的url提交表单，我如何做到这一点？http://laravel.dev/iframe/123我需要保护接受输入的路线。他们有什么办法，我可以过滤某些路线，以防止提交在拉拉维尔？如何让laravel忽略某些urls提交的表单？

浏览 2提问于2014-04-30得票数 1

3回答

按回车时提交表格

、、

你好，我有下面的代码 <p id=js_intro_text> Introduce yourself!</p> Please enter your name: <inputtype="button" onc

浏览 4提问于2017-01-02得票数 0

回答已采纳

2回答

使用Carrierwave的Rails on Image Upload中奇怪的路由行为

、、、

我使用remote: true提交表单的各个部分，而无需重新加载整个页面，然后简单地用响应HTML替换表单HTML (这是表单的一部分)。URL (.../edit)应保持不变。最后，当我提交带有新图像的表单以供上传时，以下是我的服务器日志(为简短起见，稍微编辑了一下)： I, [2016-10-17T10:09:24.745387 #1219] INFO -- : StartedI, [2016-10-17T10:09:24.754005 #1219] INFO -- :

浏览 4提问于2016-10-17得票数 0

3回答

javascript表单访问

、、

<form name = "myForm" onsubmit="foo()"> <input type = "text" name="name" /></form> function foo(){ alert(docume

浏览 0提问于2011-10-24得票数 0

回答已采纳

1回答

验证失败的Parsley.js提交表单

、

我在Parlsey.js中使用两个组，一个用于警告，另一个用于关键错误。如果警告失败，表单仍应提交，但如果严重错误失败，则不应提交。理想情况下，我只希望在关键组失败时阻止表单提交，但我怀疑Parsley.js是否支持这一点。然而，似乎应该有一种方法告诉Parsley.js始终提交表单，而不管它是否有效。然后，我可以注册一个提交处理程序，只检查关键组，并在失败时阻止

浏览 4提问于2017-05-12得票数 1

回答已采纳

1回答

通过ajax将var传递给php？

、、

我得到的警报，表单已提交，但没有显示在php文件中。我检查了js变量，它们显示正确。这是我的HTML表单。

浏览 13提问于2016-09-19得票数 0

3回答

页面在使用AJAX时保持刷新。

、、

我正在创建一个包含表单的模态框。表单将返回使用ajax和php提交的输入，然后模式框将消失。问题是，结果显示了几秒钟之后，方框就消失了，页面会刷新。Symptoms</h2></header> <form class="js-ajax-php-json<&#

浏览 2提问于2014-11-02得票数 0

回答已采纳

3回答

javascript return false form onclick不起作用

从onclick返回false以阻止按钮运行。然而，由于某些原因，这个page...it上的表单中的这个按钮忽略了它。然而，这个按钮正在提交表单。我不能阻止它。为什么会这样呢？有什么想法吗？我看不出这个按钮有什么特别的地方。我希望它正盯着我的脸，我只是没有看到它。

浏览 0提问于2014-04-21得票数 0

3回答

HTML表单所需的命令不起作用？

、、、

我正在尝试让我的表单要求在提交表单之前填写某些字段。，发现命令应该是这个简单的命令但是由于某些原因，在我的表单上，即使指定的字段没有填写，它也会提交它。我甚至尝试在Dreamweaver中用一个新的表单创建一个全新的文件，只有一个必需的输入项和

浏览 3提问于2013-09-05得票数 0

2回答

Recaptcha 2.0验证码放置

、

我有一个查询表单，并且我已经在其中添加了recaptcha 2.0。现在，我需要将验证码添加到表单的验证文件中。

浏览 0提问于2015-04-28得票数 2

2回答

如何使用if导航到JavaScript中的URL

、、

我正在尝试验证文本框中是否填充了一些文本。在没有键入任何字符的情况下，警报(alert("Name must be filled out");)工作正常，但在其他情况下，当输入一些字符时(else window.location.href = 'http://www.w3schools.com';)不会转发到URL。<head>function validateForm() { var x = document.forms["registrati

浏览 1提问于2016-10-14得票数 0

4回答