首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

当我从onsubmit返回false时,为什么我的HTML表单仍然会提交?

当您在表单的onsubmit事件中返回false时,表单仍然可能会提交。这是因为在某些浏览器中,返回false可能不会阻止表单的默认提交行为。为了确保表单不会提交,您可以尝试以下方法:

  1. 使用event.preventDefault()

onsubmit事件处理程序中,使用event.preventDefault()来阻止表单的默认提交行为。例如:

代码语言:html
复制
<form onsubmit="handleSubmit(event)">
  <!-- 表单内容 -->
 <button type="submit">提交</button>
</form><script>
  function handleSubmit(event) {
    event.preventDefault();
    // 您的其他验证和处理逻辑
  }
</script>
  1. 使用addEventListener

使用addEventListener为表单添加submit事件处理程序,并在处理程序中使用event.preventDefault()来阻止表单的默认提交行为。例如:

代码语言:html
复制
<form id="myForm">
  <!-- 表单内容 -->
 <button type="submit">提交</button>
</form><script>
  const form = document.getElementById('myForm');
  form.addEventListener('submit', (event) => {
    event.preventDefault();
    // 您的其他验证和处理逻辑
  });
</script>

这样,无论在哪个浏览器中,您的表单都不会提交。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

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

    例如,对于用户名输入,它名称为“username”。 这样做原因是,当我提交表单,我们将获得单个对象上所有输入值。每个对象属性都将根据我们指定输入名称属性进行命名。...默认情况下,它被设置为false,但我们可以将其设置为true,以确保没有填写表单提交。 我们希望用户名值是必需,并且希望用户用户名大于6个字符但小于24个字符。...我们可以 useForm 中获取一个 errors对象,而不仅仅是不提交表单。 就像我们在 onSubmit 中获得数据函数一样,errors 包含对应于每个输入名称属性,如果它有错误的话。...onChange是用户输入时验证,onSubmit表单提交验证。...因此,如果你想禁用表单按钮,以确保表单没有提交过多次,我们可以将禁用设置为formstate.issubmitted。 提交表单,它会被禁用直到验证完成运行onSubmit函数。

    3.6K21

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

    如果送出编码类型被设为 "multipart/form-data",它会使用和表单一样格式。 上面提到了Formdata提供一种表示表单数据得键值对构造方式,什么意思?...通过Formdata你就不用手动拼接表单元素值了如name:sdd&pwd:dsf... 或许你会疑惑为什么要手动拼接表单值,直接提交不就行了吗?...有些时候我们会通过ajax提交表单,通过ajax提交表单我们不得不手动拼接表单值,数量少还好数量多很容易出错,写着也烦,此处笔者深有体会啊, 不仅如此Formdata支持文件上传,这就意味着你可以通过...ajax实现异步文件这在web开发中太有用了,此博客后台上传文件就是通过Formdata 下面我们看看传统方式于Formdata区别 传统XMLHttpRequest提交 window.onsubmit...}); return false; }); 需要注意是使用jqajax必须设置process...和contentype...

    54310

    js – form表单提交不刷新

    大家好,又见面了,是你们朋友全栈君。...大家已经发现了, 当我们点击submit提交form表单时候, 他会刷新一次, 如果不想它刷新的话有下面两种方法: 利用iframe 我们可以利用一个隐藏iframe来实现, 主要是我们把提交目标放到一个隐藏...iframe里, 然后让iframe提交数据 (ps: 这个未实测, 仅仅是网上提供, 记录一下....我们还可以绑定onsubmit事件(用jq的话是submit()), 在submit按钮效果触发之前我们就把数据提交了, 然后我们return false(让submit这次点击触发事件失效, 否则表单又会提交一次...我们在绑定onsubmit时候是把return false放进onsubmit后面的调用函数内, 这样子如果你函数出现了错误, 将不会继续执行到函数最后’return false’这里, 还是会出现刷新现象

    14.4K10

    React 支持 form action 是在作妖?不,它是一种重磅回归

    "> 当我们使用表单 form 元素,内部表单元素可以根据 name 属性与 value 值自动组合成一个完整序列化表单对象。...,onsubmit 就会触发,我们可以在这个回调函数里执行自己提交逻辑。...✓先用最基础知识内容铺垫一下 在 HTML 表单元素中,我们可以通过监听 form 对象 onsubmit 来回调函数执行。也可以通过 action 属性来直接向服务端发送请求。...> Picture: 当我们点击提交按钮...5、它对服务端渲染划时代意义 这里大家需要注意一个小细节就是,许多针对表单功能增强 API,都不是 react 中引入,而是 react-dom 中引入。 第一还没想通这到底咋回事。

    16210

    【Java 进阶篇】JavaScript 表单验证详解

    无论您是一个初学者还是一个有经验开发人员,本文将为您详细介绍如何使用 JavaScript 来进行表单验证。我们将从基础知识开始,逐步深入,以确保您全面了解这个主题。 为什么需要表单验证?...基本 HTML 表单结构 在深入了解 JavaScript 表单验证之前,让我们首先了解基本 HTML 表单结构。以下是一个简单表单示例: <!...如果任何一个字段为空,它将显示一个警告框并返回 false,防止表单提交。否则,它将返回 true,允许表单提交。 接下来,我们需要将这个验证函数与表单关联起来。...这可以通过在表单 onsubmit 属性上设置函数名来完成: 现在,当用户尝试提交表单,validateForm 函数将被调用,并根据验证结果来决定是否允许提交

    28120

    文档和元素几何滚动

    web服务器字符串 表单和元素事件处理程序 每个form元素都有一个onsubmit事件处理程序用来检测表单提交。...还有一个onreset事件处理程序来检测表单重置。表单提交前将会调用onsubmit程序,如果回调函数返回值为false则会取消表单提交动作。这是js程序一个用来检查用户输入错误。...)进行提交,将会在提交前触发onsubmit事件。...如果返回false将会取消提交。直接调用submit()方法时候,不会验证该过程,将会直接提交给服务器,所以服务器端也要做一遍验证。 正话:window对象submit事件一个句柄。...单选元素为整组有相关性元素而设计,组内所有按钮HTML属性name值都相同。按照这种方式创建按钮为互斥。利用表单属性名字选中元素,它返回一个类数组对象而不是单个元素。

    5.2K00

    JavaScript 表单验证

    JavaScript 表单验证 JavaScript 可用来在数据被送往服务器前对 HTML 表单这些输入数据进行验证。...表单数据经常需要使用 JavaScript 来验证其正确性: 验证表单数据是否为空? 验证输入是否是一个正确email地址? 验证日期是否输入正确? 验证表单输入内容是否为数字型?...假如必填或必选项为空,那么警告框会弹出,并且函数返回值为 false,否则函数返回值则为 true(意味着数据没有问题): function validateForm() { var x=document.forms...form 表单提交被调用: 实例 <form name="myForm" action="demo-form.php" onsubmit="return validateForm()" method...e-mail 地址"); return false; } } 下面是连同 HTML 表单完整代码: <form name="myForm" action="demo-form.php" onsubmit

    3.1K30

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

    大家好,又见面了,是你们朋友全栈君。...比如一个表单提交按钮所指向处理页面不同,这样由于表单在定义时候就已经确定下表单数据处理页面,所以单纯地在表单里放多个提交按钮是没有办法达到目的。这就需要javascript。...有了上面这几种提交表单方法,想差不多够应付复杂表单了. 表单提交注意点 注意:每个input标签都要有name属性,form要有action和method。...当不写type属性,其type默认值是submit,点击的话也会直接提交数据 使用formonsubmit()方法对表单数据进行 验证后 再提交 <form id="form1" action="...return<em>返回</em>值,如果值为<em>false</em>则不进行<em>提交</em>,如果为true则<em>提交</em>。

    5.1K30

    form表单提交几种方式

    大家好,又见面了,是你们朋友全栈君。 表单提交方式一:直接利用form表单提交 html页面代码: <!...可用类型如下: xml:返回XML文档,可用JQuery处理。 html返回纯文本HTML信息;包含script标签会在插入DOM执行。...返货成功即可 这里遇到一个问题:就是传过去数据后,返回值正常,但进入了error ,使用console打印error出现 parsererror 错误原因:ajaxdatatype设置问题 之前设置为...//这里验证表单是否可以提交 如果返回false阻止提交 }, success:function (data){ alert("12354") alert(data...这个是定义页面返回结果表示成功 》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》 表单提交方式四:form表单提交文件/图片 需要设定formenctype=“multipart

    6.4K20

    React19 为我们带来了什么?

    通常当用户提交表单更改某些值,我们应用程序将发出对应 API 请求,等待结果返回后根据响应内容去处理交互行为。...pending 态从而返回当前表单状态下所有数据 FormStatus : export interface FormStatusNotPending { pending: false;...通常在某个 input 输入完毕后,我们需要将 input 值输入提交到后台服务中保存后再来更新页面 UI ,这种情况就可以使用 useOptimistic 来进行所谓“乐观更新”。...而在 React19 之后,refs 支持一个返回清理函数:当元素 DOM 中被移除后会立刻调用该清理函数。...<input ref={(ref) => { // ref 创建 // 新特性: 当元素 DOM 中被移除 // 返回一个清理函数来重置 ref 值 return

    14210
    领券