AJAX 按钮提交的 HTML5 表单验证

2024-03-15

我有以下表格。我喜欢新的 HTML5 表单验证,并且更愿意保留它。然而。我不喜欢按下按钮时刷新页面(表单提交)的方式。

相反,我更愿意使用按钮触发一些 AJAX 来刷新页面元素,而不刷新整个页面。然而,当我设置type="button"发生的情况是,按下按钮时 HTML5 表单验证将停止触发。

如何使用 HTML5 表单验证,同时不触发刷新/提交页面的传播?

请注意,我不关心此问题的 AJAX 元素,只关心 HTML5 验证问题。

echo "<form>";
echo "<td><input id=\"link_add_title\" type=\"text\" class=\"form-control\" placeholder=\"URL Title\"></td>";
echo "<td><input id=\"link_add_url\" type=\"url\" class=\"form-control\" placeholder=\"Your URL\"></td>";
echo "<td><input id=\"link_add_budget\" type=\"number\" step=\"any\" class=\"form-control\" placeholder=\"Budget\"></td>";
echo "<td><button class=\"btn btn-sm btn-success\"><i class=\"fa fa-check\"></i> Add</button></td>";
echo "</form>";

这样您就可以防止实际提交,但会触发 HTML5 验证:

$('form').submit(function(event){

  event.preventDefault();

});

As Samveen https://stackoverflow.com/users/1353267/samveen指出,这种方式应该优于听onclick事件的<button>/<input type="submit">元素,因为除了普通表单提交之外,后者还会阻止 HTML5 验证 -看小提琴 http://jsfiddle.net/ozrjbLwo/.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

AJAX 按钮提交的 HTML5 表单验证 的相关文章

随机推荐

  • 干净的条件格式 (Excel VBA)

    如果这个问题已经得到解答 但我无法找到它 我深表歉意 这就是我想要的 我们都知道删除范围 行和列会分割条件格式并使其变得丑陋 我想创建一个个人宏 1 Searches through all existing Conditional For
  • Errno::EACCES: 权限被拒绝@ rb_sysopen

    当我尝试运行 gem install json v 1 8 3 时 错误 执行 gem 时 Errno EACCES 权限被拒绝 rb sysopen home ulap10 gem gems json 1 8 3 tests test j
  • 我如何告诉编译器 MyCustomType 与 SomeOtherType 是 equal_comparable_with SomeOtherType ?

    假设我有一个MyCustomType与SomeOtherType struct SomeOtherType int value constexpr bool operator const SomeOtherType rhs const de
  • 使用 LINQ 查找对称差异

    我有两个收藏a and b 我想计算其中的一组项目a or b 但不能同时存在 逻辑异或 有了 LINQ 我可以想出这个 IEnumerable
  • R 中逻辑回归的致死剂量 (LD) 置信区间

    我想找到致命剂量 LD50 其置信区间为R Minitab SPSS SAS 等其他软件提供了此类置信区间的三种不同版本 我在任何包中都找不到这样的间隔R 我也用过findFn函数来自sos包裹 我怎样才能找到这样的间隔 我根据 Delta
  • 在 Linux 中使用 TCP 时,listen 的积压数量是否包括 SYN 接收的连接数?

    我读了一些帖子并检查了 Linux 内核代码 例如inet listen gt inet csk listen start https elixir bootlin com linux v4 3 6 source net ipv4 inet
  • 如果我更改扬声器配置,ffmpeg avcodec_open2 返回 -22

    我最近总是遇到一个奇怪的问题 根据我在 Windows stereo quad 5 1 中设置音频配置的方式 对 avcodec open2 的 ffmpeg 调用失败并出现错误 22 或正常工作 由于找不到太多有关该错误的信息 我想我应该
  • Ghostscript 顽固地拒绝嵌入字体

    我有一个从 pdflatex 创建的文档 嵌入 R pdf 图表 我现在正尝试将其发送到要求嵌入所有字体的打印机 lulu 我认为 没问题 gs dNOPAUSE dBATCH dNOPLATFONTS sDEVICE pdfwrite d
  • 如何:点击时将视图置于前面;设置最大/最小捏合手势比例;将屏幕限制设置为平移手势

    注意 我发现的所有东西都太旧了 或者与我实际需要的东西相差太大 而且我几乎尝试了我发现的所有东西 但没有一个能以正确的方式工作 我创建了 3 个 UIView 我可以拖动它们并缩放它们 现在 我需要 将其中一些放在前面 我想为每个添加一个
  • 使用owin中间件替换响应体

    有没有办法使用 OWIN 中间件覆盖响应内容 我的自定义错误类 public class Error public string error get set public string description get set public
  • RxJs - forkJoin 与空数组

    我目前正在使用forkJoin等待数组Observable s 之前完成pipe 英 和tap ping 我注意到如果数组为空 则不会发出任何信号 我什至不能tap 我该如何解决这种问题 我应该检查数组是否为空吗 myFirstFuncti
  • AspNetCore 2.0 声明始终为空

    我正在努力将 DotNet 4 5 MVC WebAPI 应用程序转换为 AspNetCore 2 0 但在让 Cookie 身份验证再次工作时遇到一些问题 当我设置 cookie 并尝试访问安全方法时 我无法到达那里 当我进入匿名方法并检
  • 空比较

    有一个查询 UPDATE MyTable SET nvarchar1 blahblah WHERE Id 096fe792 7313 416f b3c8 327f46be73b6 AND nvarchar1 lt gt blablah 当
  • 使用 Delphi 检测互联网连接激活

    我使用 3G 无线卡已经有一段时间了 每次连接时 我的防病毒软件都会启动更新 我想知道我可以使用哪些 Win32 API 函数集来获取通知或查询即将出现的 Internet 连接事件 Delphi 已经有一组移植的标头了吗 我参与了一个项目
  • 如何将无边框表单对齐到屏幕边缘?

    当我将窗体的边框样式设置为无时 我无法再将窗口捕捉到屏幕边缘 我怎样才能两者兼得 Aero Snap 需要一个有边框的窗口 没有后门 您可以使用以下代码来模拟捕捉这个帖子 https stackoverflow com a 591734 1
  • ruby/ruby on Rails 内存泄漏检测

    我使用 ruby on Rails 编写了一个小型 Web 应用程序 其主要目的是上传 存储和显示 xml 文件最多可达几 MB 文件的结果 运行大约 2 个月后 我注意到杂种进程使用了 大约 4GB 内存 我做了一些关于调试 ruby 内
  • 单页网站上复杂的活动状态导航

    HTML div class logo ribbon a href top a div
  • 为什么用 p.then(resolve) 比用resolve(p) 更早地解决新的 Promise?

    Code 1 和 Code 2 之间的区别是 Code 1 使用resolve p 和代码 2 使用p then gt resolve 我希望输出的序列是不变的 但它们会生成不同的序列 我不明白为什么 代码 1 resolve p cons
  • javac 类路径顺序与 Oracle 文档相矛盾?

    In 塞拉 贝茨 SCJP https rads stackoverflow com amzn click com 0071591060本书第 797 页 java 和 javac 首先查看包含 Java SE 标准类的目录 然后他们查看类
  • AJAX 按钮提交的 HTML5 表单验证

    我有以下表格 我喜欢新的 HTML5 表单验证 并且更愿意保留它 然而 我不喜欢按下按钮时刷新页面 表单提交 的方式 相反 我更愿意使用按钮触发一些 AJAX 来刷新页面元素 而不刷新整个页面 然而 当我设置type button 发生的情