开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Form onsubmit返回false，但仍在继续提交表单

在前端开发中，当一个表单被提交时，通常会触发表单的onsubmit事件。onsubmit事件可以绑定一个JavaScript函数，用于在表单提交之前执行一些操作，比如数据验证、数据处理等。当onsubmit事件绑定的函数返回false时，表单将不会继续提交，而是停留在当前页面。

然而，有时候即使onsubmit事件绑定的函数返回了false，表单仍然会继续提交。这可能是因为在onsubmit事件函数中存在一些问题，导致返回的false无法阻止表单提交。以下是一些可能导致这种情况发生的原因：

语法错误：在onsubmit事件函数中可能存在语法错误，导致函数无法正确执行。这种情况下，浏览器可能会忽略返回的false，继续提交表单。
异步操作：如果在onsubmit事件函数中存在异步操作，比如AJAX请求或定时器，那么返回的false可能无法及时生效。因为异步操作会在返回false之后继续执行，而表单提交的操作可能在异步操作完成之前发生。
其他事件监听器：可能存在其他事件监听器绑定在表单上，这些监听器可能会在onsubmit事件之后触发，并执行一些与表单提交相关的操作。这些操作可能会导致表单继续提交，即使onsubmit事件函数返回了false。

为了解决这个问题，可以尝试以下方法：

检查代码：仔细检查onsubmit事件函数中的代码，确保没有语法错误或其他逻辑错误。
阻止默认行为：在onsubmit事件函数的开头使用event.preventDefault()方法来阻止表单的默认提交行为。这样即使函数中的其他代码出现问题，表单也不会继续提交。
确保同步操作：如果在onsubmit事件函数中存在异步操作，确保这些操作在返回false之前完成。可以使用Promise、async/await等方法来处理异步操作，确保它们在返回false之前完成。
移除其他事件监听器：如果可能的话，移除其他绑定在表单上的事件监听器，以避免它们干扰onsubmit事件的执行。

需要注意的是，以上方法仅适用于前端开发中的表单提交问题。在后端开发中，还需要确保后端代码对表单提交的处理逻辑正确无误。

腾讯云相关产品和产品介绍链接地址：

腾讯云前端开发相关产品：https://cloud.tencent.com/product/webhosting
腾讯云后端开发相关产品：https://cloud.tencent.com/product/cvm
腾讯云数据库相关产品：https://cloud.tencent.com/product/cdb
腾讯云服务器运维相关产品：https://cloud.tencent.com/product/cvm
腾讯云云原生相关产品：https://cloud.tencent.com/product/tke
腾讯云网络通信相关产品：https://cloud.tencent.com/product/vpc
腾讯云网络安全相关产品：https://cloud.tencent.com/product/ddos
腾讯云音视频相关产品：https://cloud.tencent.com/product/vod
腾讯云多媒体处理相关产品：https://cloud.tencent.com/product/mps
腾讯云人工智能相关产品：https://cloud.tencent.com/product/ai
腾讯云物联网相关产品：https://cloud.tencent.com/product/iotexplorer
腾讯云移动开发相关产品：https://cloud.tencent.com/product/apigateway
腾讯云存储相关产品：https://cloud.tencent.com/product/cos
腾讯云区块链相关产品：https://cloud.tencent.com/product/baas
腾讯云元宇宙相关产品：https://cloud.tencent.com/product/vr

相关搜索:Codeigniter form_validation在尝试提交时总是返回false CustomValidator设置为false，但仍在提交表单 Django表单有效，未生成任何错误，但返回False javascript提交表单，然后阻塞并使用swal从非异步函数返回false js提交form表单返回 js提交form表单返回值动态添加字段到表单后，django form.is_valid返回false 即使我在处理程序中返回false，Angular仍然提交表单即使验证函数返回false，表单仍在提交在提交确认返回false时如何防止表单动作？

相关搜索:

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

有帮助

没帮助

相关·内容

SpringMvc返回form表单提交

前言：在项目中需要后台处理完数据之后post 表单提交跳转到对方的前台页面，不管是银联网银支付还是第三方网银支付。这个时候就需要使用ResponseBody方法模拟form表单提交。...html; charset=UTF-8\"/> "); send.append(""); send.append(FormUtil.MaptoInput(map)); send.append("</form...stringBuffer.append(toInput(key, value)); } return stringBuffer.toString(); } /** * 转换为表单隐藏

2.1K3 0

submit方法与onsubmit事件

一．form的submit方法是否会触发onsubmit事件？...如何阻止表单的提交经常我们的提交表单前都会用js对表单内容作验证，如果有问题，则不希望提单表单。那么，如果阻止表单提交呢？取决于你用什么方式给表单加入onsubmit事件。...onsubmit事件，表单能否提交取决于onsubmit函数的返回值。...false时，表单不会提交。...，但FF及chrome下表单正常提交了...

2.6K2 0

前端魔法堂：onsubmit和submit事件处理函数怎么不生效呢？

前言最近在用Polymer增强form，使其支持表单的异步提交，但发现明明订阅了onsubmit和submit事件，却怎么也触发不了。下面我们将一一道来。...(e) 示例4，jQuery $('form').trigger('submit') 各种提交方式的背后就onsubmit函数和submit事件而言方式1，方式2和方式4均可依次调用onsubmit...函数和触发submit事件，因此可以在onsubmit函数或submit事件处理函数中禁止执行默认行为来实现表单的异步提交; 方式3既不会调用onsubmit函数，也不会触发submit事件。...前提：form.novalidate为false 方式1和方式...2，若input#name内容为空，则弹出非法内容警告，并阻止表单提交，不执行onsubmit和触发submit事件方式3，直接提交表单方式4，若input#name内容为空，不弹出非法内容警告，更不会阻止表单提交

1.8K7 0

通过 Laravel 创建一个 Vue 单页面应用（六）

现在，我们尚未定义后端路由，所以当提交时，API会返回 405 Method Not Allowed。...让我们在不定义路由的情况下完善 UsersCreate 组件中 onSubmit() 方法，这样我们能快捷的看到提交表单时产生的错误： methods: { onSubmit($event) {...'; }) .then(() => this.saving = false) } } 目前，我们的表单只是将返回值输出到控制台，抓取错误，然后切换...我们将清除表单并重定向到用户的编辑页： onSubmit($event) { this.saving = true this.message = false api.create...但为了让那些从来没有使用过 Vue Router ，也没有做过单页应用的人更好上手，我决定只关注核心部分。

3.8K2 0

快来使用 React-Hook-Form 搭建强大的React表单

> ); } 使用 handleSubmit 提交表单为了处理提交表单和接收输入数据，我们将在表单元素中添加一个onSubmit，并将其连接到同名的本地函数: function...默认情况下，它被设置为false，但我们可以将其设置为true，以确保没有填写表单时不提交。我们希望用户名值是必需的，并且希望用户的用户名大于6个字符但小于24个字符。...validate允许我们提供自己的逻辑来确定它是否有效(通过返回布尔值true或false)。对于这里的电子邮件，我们也希望它是必需的，并且是有效的电子邮件。...onChange是用户输入时验证，onSubmit是表单提交时验证。...因此，如果你想禁用表单的按钮，以确保表单没有提交过多次，我们可以将禁用设置为formstate.issubmitted。提交表单时，它会被禁用直到验证完成运行onSubmit函数。

3.6K2 1

form实现表单提交的各种方法(表单提交源码)

有了上面这几种提交表单的方法,我想差不多够应付复杂的表单了. 表单提交注意点注意：每个input标签都要有name属性，form要有action和method。...当不写type属性时，其type的默认值是submit，点击的话也会直接提交数据使用form的onsubmit()方法对表单数据进行验证后再提交 <form id="form1" action="...; } else { //验证通过 return true; } } 这里给form元素加上了onsubmit()方法，它会在“提交”按钮点击的时候被触发，该方法一定要有...return返回值，如果值为false则不进行提交，如果为true则提交。..."username":username, "password":password } 表单的 input、select 默认的样式是不同的，所以就造成了width设置的一样，但就是对不齐

5.1K3 0

文档和元素的几何滚动

web服务器的字符串表单和元素的事件处理程序每个form元素都有一个onsubmit事件处理程序用来检测表单提交。...还有一个onreset事件处理程序来检测表单的重置。表单提交前将会调用onsubmit程序，如果回调函数的返回值为false则会取消表单的提交动作。这是js程序一个用来检查用户的输入错误。...）进行提交，将会在提交前触发onsubmit事件。...如果返回false将会取消提交。直接调用submit()方法的时候，不会验证该过程，将会直接提交给服务器，所以服务器端也要做一遍验证。正话：window对象的submit事件的一个句柄。...使用场景：对用户表单进行输入的验证具体的后面有事件，继续写。其过程如下先触发onsubmit事件 → 接着调用submit()方法完成提交。

5.2K0 0

通过 Laravel 创建一个 Vue 单页面应用（四）

我们给模板添加了 :disabled 属性，来避免重复提交，它能保证当我们在更新数据时提交按钮是禁止状态： <button type="submit...我们需要重置这个属性为 <em>false</em> ，来确保我们可以再次<em>提交</em>数据。我们最后的 then() 使用了 _ 来表示这里有一个变量，但我们并不需要使用。...第二个目标，在<em>表单</em>底部添加一个 <em>返回</em> 或取消按钮，来放弃更新，并<em>返回</em>上一页。如果你喜欢尝试，可以在 UsersEdit 组件向 API 发送无效请求时显示验证错误。...并在<em>表单</em>成功<em>提交</em>后，清除错误消息。下一步处理完用户的更新后，我们将注意力转移到删除用户上。删除用户将有助于演示成功删除后以在代码中进行跳转。...如果您准备好了，请<em>继续</em> 第五部分。

2K1 0

表单提交中的input、button、submit的区别

type的默认值是submit，所以点击一个button会引起表单提交：确定注意:如果你在做...3.回车键提交表单 Enter键是可以提交表单的！但是你可能已经注意到了，并非所有的表单都可以用Enter键来提交。...通用的办法是设置onsubmit：只需要在onsubmit的一系列语句最后返回false，便可以阻止它提交。...如果你希望调用一个方法来决定是否阻止提交，记得在此处返回方法的返回值： <input value

3.5K10 0

js – form表单提交不刷新

大家已经发现了, 当我们点击submit提交form表单的时候, 他会刷新一次, 如果不想它刷新的话有下面两种方法: 利用iframe 我们可以利用一个隐藏的iframe来实现, 主要是我们把提交目标放到一个隐藏的...onsubmit事件(用jq的话是submit()), 在submit按钮效果触发之前我们就把数据提交了, 然后我们return false(让submit这次的点击触发事件失效, 否则表单又会提交一次..., 并且刷新页面) 我们可以这样: ====== 如果你用原生js的话 html代码: /* ======================= */ ====== 如果你用jq

14.4K1 0

form表单添加验证码并当验证通过后再提交表单

意思就是，form表单中添加一个验证码验证，然后当点击提交时先核验验证码是否正确，如果正确再提交数据，否则不提交。...form表单 <form class="form-horizontal" action="submit-form.php" method="post" onsubmit="return... 在form表单中给onsubmit一个 return validateCaptcha()事件，并添加一个验证码展示区域 id为generated-captcha...; } } 当输入的验证码和随机生成的验证码相同返回true，否则返回false 表单提交事件 // 使用事件监听器来捕获表单提交事件 var form = document.querySelector...，并且检测如果验证返回true则手动提交表单，否则返回错误信息。

1.5K1 0

你还在手动拼接ajax数据吗？还不会通过ajax实现文件上传？

通过Formdata你就不用手动拼接表单元素的值了如name:sdd&pwd:dsf... 或许你会疑惑我为什么要手动拼接表单值，直接提交不就行了吗？...有些时候我们会通过ajax提交表单，通过ajax提交表单时我们不得不手动拼接表单值，数量少还好数量多很容易出错，写着也烦，此处笔者深有体会啊，不仅如此Formdata支持文件上传，这就意味着你可以通过...ajax实现异步文件这在web开发中太有用了，此博客后台上传文件就是通过Formdata 下面我们看看传统方式于Formdata的区别传统XMLHttpRequest提交 window.onsubmit...('oform')//获取form元素 window.onsubmit=function(){ let formdata = new FormData(oform)//通过表单构建...; } 看上去代码似乎都差不多，但这里我们没有手动拼接数据，而是直接使用了表单元素的数据。

5421 0

js与form交互方式总结

前言：刚开始接触web开发的时候，往往采用form表单直接提交的方式，但可能存在兼容问题，如： ...... </form 后来熟悉了js，更加倾向于使用ajax提交表单，有时甚至连form标签都不使用了。...1 方式一：onsubmit验证提交在form标签中增加onsubmit事件来判断表单提交是否成功 function validate(...> 2 方式二：通过button按钮触发自定义方法验证提交会自动忽略其他标签中的属性，如form标签中的onsubmit属性失效，js使用submit方法提交 3 方式三：将onsubmit(onclick)事件放在submit标签中将onsubmit事件放在submit标签中而不是form标签中，此时表单验证失效，点击提交按钮表单直接提交 <script

2.7K4 0

JavaScript 表单验证

假如必填或必选项为空，那么警告框会弹出，并且函数的返回值为 false，否则函数的返回值则为 true（意味着数据没有问题）： function validateForm() { var x=document.forms...form 表单提交时被调用: 实例姓: E-mail 验证下面的函数检查输入的数据是否符合电子邮件地址的基本语法...; } } 下面是连同 HTML 表单的完整代码：

3.1K3 0

form表单提交的几种方式

1.1 submit直接提交账号上面代码就可以直接完成form表单的提交，提交地址为test.php。...但大部分时候我们都需要对提交的内容进行校验。这时候就需要用到了onsubmit了。...1.2 带校验的submit提交 <label for="logInName...) return <em>false</em> } //校验成功 return true } 2. ajax<em>提交</em>

1.7K1 0

js基础-表单验证和提交

js校验：　　方法1：　　　　　　在from属性后面接着添加onsubmit="return false;"属性.表示不提交。true则相反。这里可以用一个方法替换。...return false；return表示函数执行结束，后面的代码不执行。return false表示该函数返回一个boolean值为false。...对应到表单，就是onsubmit="false"，表示不提交。如果if条件都满足，则return true；提交。...||表示或者，意思是，如果username==null或者username是空字符串，条件1或者条件2为true则都是true 方法2：js控制提交表单首先，表单元素代码如下： 1 10 这里关于提交，页面切图通常都会用a标签或者button来提交，因为涉及到表单验证。

12.5K6 0

前端和后端交互的方式

1.前端开发与后台交互的方式（1）form提交同步请求（2）Ajax提交异步请求发送json对象一、Ajax：异步的javascript和XML 主要优点： 1.异步请求，不妨碍用户浏览页面或者其他操作...data:$('#myformid').serialize(),// 序列化form表单数据,后台解析需要反序列化 async: false...alert("请求成功"); } }); 二、Form表单提交到后台交互 ... form表单提交为同步请求，submit按钮会刷新整个页面注意在使用ajax提交form表单时，提交按钮应为type=“button”，然后为其绑定点击事件

3K2 0

回车提交表单

——唐•杜荀鹤我们在页面开发中经常会写一些表单，但身为一个懒人，肯定是懒得点提交按钮的，我一般直接按回车提交当我们的form满足只有一个input的时候，回车事件是生效的当我们的form有多个input的时候，回车事件失效了此时我们可以加一个input，让type=submit...即可再次满足回车提交效果如果要隐藏掉，使用样式display:hide隐藏即可...但有时如果我们如果需要回车不提交表单，则可以避免上述条件如果想要不执行submit事件，可以直接在form上加一个onsubmit="return false"即可

4K3 0

form表单提交的几种方式

表单提交方式一：直接利用form表单提交 html页面代码： username: username:<input type...("submit",{ url:"http://localhost:8080/user", onsubmit:function(){ //这里验证表单是否可以提交如果返回false

6.4K2 0

JavaScript---网络编程(12)--DHTML技术演示(5)-form表单验证技术(正则)

具体的技术，我后面还会继续写博客的。本人也还在学习中。表单验证1-简单验证进行简单的验证，用户名必须为abcd，密码长度必须大于等于6 然后根据用户输入的数据，在后面给出提示。...代码演示： 3form3.html DHTML技术演示---注册表单的验证且控制提交--前端校验 <meta...--通过注册onsubmit事件响应来控制表单的提交，如果return false则不会提交，而return true则会提交。...如果不注册onsubmit事件即是return true onsubmit 当表单将要被提交时触发。...--表单提交方式2---自己写个按钮来代替form自带的提交按钮--> <form id="userinfo" action="/dhtmlProj/servlet/RegServlet

1.1K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭