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

尽管返回false,但表单onsubmit不起作用

表单的onsubmit属性是用于指定在提交表单时执行的函数。当onsubmit属性返回false时,表单将不会被提交,即不会执行表单的默认提交行为。

尽管返回false,但表单onsubmit不起作用可能有以下几种原因:

  1. 代码错误:请检查代码中是否正确设置了表单的onsubmit属性,并确保绑定的函数没有语法错误。
  2. 事件冲突:可能存在其他事件或代码与表单的onsubmit事件冲突,导致onsubmit事件无法正常触发。可以尝试通过调整代码顺序或检查其他事件绑定来解决冲突。
  3. 表单属性冲突:某些表单属性或其他属性可能与onsubmit事件冲突,导致onsubmit事件无法正常触发。可以尝试移除或调整相关属性来解决冲突。
  4. 浏览器兼容性问题:不同浏览器对于表单的onsubmit事件的处理方式可能存在差异,可能会导致onsubmit事件不起作用。可以尝试在不同浏览器中测试,并根据需要进行兼容性处理。

总结起来,当表单的onsubmit属性返回false时,表单的默认提交行为将被取消,但如果表单的onsubmit事件不起作用,可能是由于代码错误、事件冲突、属性冲突或浏览器兼容性问题所导致。需要仔细检查代码,并根据具体情况进行排查和解决。

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

相关·内容

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

    默认情况下,它被设置为false,但我们可以将其设置为true,以确保没有填写表单时不提交。 我们希望用户名值是必需的,并且希望用户的用户名大于6个字符小于24个字符。...validate允许我们提供自己的逻辑来确定它是否有效(通过返回布尔值true或false)。 对于这里的电子邮件,我们也希望它是必需的,并且是有效的电子邮件。...如果输入的是电子邮件,则返回true。...onChange是用户输入时验证,onSubmit表单提交时验证。...因此,如果你想禁用表单的按钮,以确保表单没有提交过多次,我们可以将禁用设置为formstate.issubmitted。 提交表单时,它会被禁用直到验证完成运行onSubmit函数。

    3.6K21

    真是奇思妙想!useActionState,困扰了我整整两天

    1、useActionState 基础 useActionState 是一个针对 form action 进行增强的 hook,我们可以根据提交时的表单数据返回新的状态,并对其进行更新。...该回调函数的具体执行内容由 fn 定义 fn 接收当前状态和当前提交的表单对象作为参数,它执行的返回值决定了新状态的值。...permallink 是一个 URL,主要运用于服务端,在客户端组件中不起作用。...i这个状态,通常是表单项之外的数据 例如这个案例,我希望记录一下表单提交的次数。 没错,答案就是,使用 useState 或 useActionState。...1) } 使用 useActionState 时,我们只需要把 formAction 传递给 form 元素的 action 属性,然后在请求成功之后返回

    34210

    通过 Laravel 创建一个 Vue 单页面应用(四)

    在处理第一个表单时,我们有机会了解如何定义动态 Vue 路由。我们的路由的动态部分是与用户数据记录匹配的用户 ID。...我们将使用数据库中的 id 字段,你也可以使用 UUID 或者其他的数据标识。 安装 在处理 Vue 组件之前,我们需要定一个新的 API 接口来获取指定的用户,然后再定义一个接口来处理更新。...这个模块会尽可能的简单,之后你可以在请求之前或者之后随意处理数据。...在 UsersEdit 组件中加载用户数据 现在我们有了一个可复用很简陋的api客户端,当编辑页面生成之后我们使用它来获取用户数据。...第二个目标,在表单底部添加一个 返回 或 取消 按钮,来放弃更新,并返回上一页。 如果你喜欢尝试,可以在 UsersEdit 组件向 API 发送无效请求时显示验证错误。

    2K10

    通过三个实例掌握如何使用 TypeScript 泛型创建可重用的 React 组件

    return {render(data)} } 在这个例子中,GenericComponent 接受一个 render 属性,这个属性是一个函数,它接收类型为 T 的数据并返回一个...尽管在实际项目中我们通常会使用像 Formik 或 react-hook-form 这样的库来处理表单为了演示泛型的强大之处,我们将从头开始创建一个简单的表单组件。...定义表单字段和组件的类型 首先,我们定义一些 TypeScript 类型,用来指定表单字段的结构以及我们的通用表单组件将接受的 props。这些类型确保了类型安全,并帮助我们管理表单的状态和行为。...最后,我们使用通用表单组件,并指定具体的表单字段和初始值。...RenderPersonRow 是一个用于渲染每行数据的组件,它接受 Person 类型的属性并返回一个表格行。

    19310

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

    当不写type属性时,其type的默认值是submit,点击的话也会直接提交数据 使用form的onsubmit()方法对表单数据进行 验证后 再提交 <form id="form1" action="...; } else { //验证通过 return true; } } 这里给form元素加上了<em>onsubmit</em>()方法,它会在“提交”按钮点击的时候被触发,该方法一定要有...return<em>返回</em>值,如果值为<em>false</em>则不进行提交,如果为true则提交。...data: $('#form1').serialize(), //提交的数据 success: function (result) { console.log(result); //打印服务端<em>返回</em>的数据...,所以就造成了width设置的一样,<em>但</em>就是对不齐,可以设置box-sizing:border-box;来解决不一致问题 补充 <em>表单</em>具有默认的提交行为,默认是同步的,同步<em>表单</em>提交,浏览器会锁死(转圈儿)等待服务端的响应结果

    5.3K30

    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...; } } 下面是连同 HTML 表单的完整代码: <form name="myForm" action="demo-form.php" onsubmit="return validateForm(

    3.1K30

    文档和元素的几何滚动

    还有一个onreset事件处理程序来检测表单的重置。表单提交前将会调用onsubmit程序,如果回调函数的返回值为false则会取消表单的提交动作。这是js程序一个用来检查用户的输入错误。...onsubmit事件只能通过单击提交按钮触发。(通过回车也能触发该事件)如果直接调用表单的submit()方法将不会触发onsubmit事件处理程序。...onreset事件处理程序和onsubmit是类似的。也是会在表单重置之前触发该事件。...如果返回false将会取消提交。直接调用submit()方法的时候,不会验证该过程,将会直接提交给服务器,所以服务器端也要做一遍验证。 正话:window对象的submit事件的一个句柄。...false,则不会重置 同样,如果使用表单的onreset()方法也不会触发该事件,将会直接进行重置。

    5.2K00

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

    前言  最近在用Polymer增强form,使其支持表单的异步提交,发现明明订阅了onsubmit和submit事件,却怎么也触发不了。下面我们将一一道来。...函数和submit事件而言 方式1,方式2和方式4均可依次调用onsubmit函数和触发submit事件,因此可以在onsubmit函数或submit事件处理函数中禁止执行默认行为来实现表单的异步提交;...前提:form.novalidate为false 方式1和方式...2,若input#name内容为空,则弹出非法内容警告,并阻止表单提交,不执行onsubmit和触发submit事件 方式3,直接提交表单 方式4,若input#name内容为空,不弹出非法内容警告,更不会阻止表单提交...() }) @method reportValidity():Boolean - 功能和checkValidity一样,另外会以浏览器定义的方式显示提示信息 总结 尊重原创,转载请注明

    1.9K70

    「设计模式 JavaScript 描述」策略模式

    这段代码是基于传统面向对象语言的模仿,下一节我 们将了解用 JavaScript 实现的策略模式。 2....registerForm.onsubmit 函数缺乏弹性,如果增加了一种新的校验规则,或者想把密码的长度校验从 6 改成 8,我们都必须深入 registerForm.onsubmit 函数的内部实现,...; return false; // 阻止表单提交 } }; 从这段代码中可以看到,我们先创建了一个 validator 对象,然后通过 validator.add 方法,往 validator...如果 validator.start()返回了一个确切的 errorMsg 字符串当作返回值,说明该次校验没有通过,此时需让 registerForm.onsubmit 方法返回 false 来阻止表单的提交...当然,策略模式也有一些缺点,这些缺点并不严重。 首先,使用策略模式会在程序中增加许多策略类或者策略对象,实际上这比把它们负责的逻辑堆砌在 Context 中要好。

    49720

    AngularDart4.0 指南- 表单

    任何唯一值将会这样做,使用描述性名称是有帮助的。 将[(ngModel)]与表单结合使用时,定义ngControl指令是一项要求。...这说明有些事情是错的,用户不知道什么是错的,或者该怎么做。 利用控件的状态来显示有用的消息。 使用有效的和原始的状态 当用户删除名称时,表单应该如下所示: ?...为了使它有用,将表单组件的onSubmit()方法分配给表单的ngSubmit事件绑定: 请注意模板引用变量...()" #heroForm="ngForm"> 该表单从一开始就是可见的,因为在提交表单之前,提交的属性为false,因为HeroFormComponent中的片段显示为...:lib/src/hero_form_component.dart (submitted) bool submitted = false; void onSubmit() => submitted =

    17.5K30
    领券