无法阻止表单以空输入提交

2023-12-21

当任何输入为空时,我无法阻止表单提交。它没有出错,但也没有停止提交。我在表单提交输入中调用了该函数。它位于 onClick 调用下。

JS File

function stopSubmit(){
  var inDay = document.getElementById(indate).value;
  var inType = document.getElementById(intype).value;
  var inAmount = document.getElementById(inamount).value;
  if (inDay == "") {
    alert("Please select a date");
    return false;
  }
  if (inType == "Select One"){
    alert("Please select a frequency");
    return false;
  }
  if (inAmount == ""){
    alert("Please enter an amount");
    return false;
  }
  else {
    alert("Your form was submitted");
  }
}

HTML 文件

<td>
          <input type="submit" name="submitincome" value="submit" onclick="stopSubmit()">
        </td>

Edit

Use the required属性,您甚至不需要任何 JavaScript。请参阅演示 2。有关功能演示,请参阅此PLUNKER http://embed.plnkr.co/7gS4oF1tyynVXEjlvfDq/


OLD

在每个之前return false add e.preventDefault()

演示(由于 SO 安全措施而无法运行)

function stopSubmit(e) {
  var inDay = document.getElementById(indate).value;
  var inType = document.getElementById(intype).value;
  var inAmount = document.getElementById(inamount).value;
  if (inDay == "") {
    alert("Please select a date");
    e.preventDefault();
    return false;
  }
  if (inType == "Select One") {
    alert("Please select a frequency");
    e.preventDefault();
    return false;
  }
  if (inAmount == "") {
    alert("Please enter an amount");
    e.preventDefault();
    return false;
  } else {
    alert("Your form was submitted");
  }
}
<form>

  <td>
    <input type="submit" name="submitincome" value="submit" onclick="stopSubmit()">
  </td>

</form>

演示2 使用必填属性

<!DOCTYPE html>
<html>

<head>
  <style>
    input {
      display: block
    }
  </style>
</head>

<body>

  <form id='inform' action='http://httpbin.org/post' method='post'>
    <input id='indate' name='indate' required>
    <input id='intype' name='intype' required>
    <input id='inamount' name='inamount' required>

    <input type="submit">


  </form>


</body>

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

无法阻止表单以空输入提交 的相关文章

  • Chrome 跨域 PATCH 请求不起作用

    我有一个带有 REST Api 的网站 现在我正在创建一个浏览器扩展 它将从某些页面收集数据并将它们发送回 REST Api 因为我希望我的扩展能够与 Firefox 和 Chrome 兼容 并且易于维护 所以我将实际代码作为脚本标记注入到
  • 预加载 javascript 和 css 文件

    我目前正在开发一个移动网站 该网站大量使用图像 CSS 和 JavaScript 例如 它使用未压缩的 150KB 的库 我为图像构建了一个预加载器 效果相当好 function loadImages images var sum 0 fo
  • 使用淘汰赛动态显示/隐藏元素

    我有一个表 有四列 即代码 名称 数量和价格 其中 我想动态更改数量列的内容 元素 通常 它应该显示其中显示数量的元素 当用户单击元素时 我想显示该元素 以便用户可以编辑数量 我正在尝试按照 示例2 来实现淘汰赛文档链接 http knoc
  • Webpack - 资产大小限制中的警告:以下资产超出了建议的大小限制 (244 KiB)

    当我在生产模式下运行 webpack 时 有资产规模限制 超出 的警告 我怎样才能运行而不出现这个错误 在我的项目中 我包含 css 并且我看到 webpack 构建中包含一些 node module 目录 但是如果我排除 css 的 no
  • 获取输入图像类型选择的图片并加载到图像标签中

    所以 我有一个用于上传 img 文件的输入框 我想要做的是从该数据 或选定的源 中获取数据并将其路由到图像标签的 src 属性中 像这样的东西 http jsfiddle net QC2c4 http jsfiddle net QC2c4
  • JavaScript/jQuery - “$ 未定义 - $function()”错误

    我正在尝试运行 JavaScript jQuery 函数并且Firebug http en wikipedia org wiki Firebug 28software 29得到错误 is not defined function JavaS
  • 如何在引导程序中制作两个等高的列?

    我有这个代码 HTML div class container fluid div class row div class col md 6 p Line p p Line p p Line p p Line p p Line p p Li
  • FullCalendar:如何重新创建/重新初始化 FullCalendar 或批量添加多个事件

    我正在尝试将新事件批量添加到日历中 但未能找到方便的使用方法 所以我决定用新的事件数组重新初始化视图 所以我尝试了以下方法 var events title Event start new Date y m d 10 description
  • 如何在使用类型分散时将箭头添加到行尾

    如何在 y 不等于 0 且系列类型以线宽 2 分散的情况下正确地将箭头添加到行的每一端 在这里我可以看到箭头已添加但未正确添加 请看这个 部分工作小提琴 http jsfiddle net vnYCX 这是我的 JS 最初的原型是由 sta
  • 如何使用 Node.js 解析 JSON? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我应该如何使用 Node js 解析 JSON 是否有一些模块可以安全地验证和解析 JSON 你可以简单地使用JSON parse h
  • 如果突出显示一个单词并且用户单击连接单词,则同时突出显示两个单词

    我最近发布了一个question https stackoverflow com questions 34963610 how can i highlight a word term quicker and smarter寻求一种更智能地突
  • Intern JS - 如何在链式 Command 方法中使用 Promise.all()?

    我是用 Intern JS 编写测试的新手 并且一直在遵循他们的文档来使用对象接口 https theintern github io intern interface object and 页面对象 https theintern git
  • 如何使 4.X Typescript 项目与旧版本的 Typescript(如 3.X)兼容?

    如何使基于 TS 4 X 构建的软件包与 3 X 兼容 例如 如果我有较新的版本 则使用新功能 否则使用any or unknown或旧版本支持的任何内容 有没有可能使用指令 https www typescriptlang org doc
  • 除非打开开发人员工具,否则 IE8 Javascript 无法运行?

    由于某种原因 在 IE8 中 除非我在打开开发工具的情况下重新加载页面 否则 javascript 不会运行 我关闭开发人员工具并重新加载页面 然后 javascript 停止工作 我没有收到任何错误报告 无论如何它们也没有任何用处 还有其
  • React Router Tabs——保持组件安装

    我使用 React Router 创建了选项卡 每个选项卡都有不同的路线 但是 我想通过保持隐藏选项卡的安装来维护选项卡转换之间的选项卡状态 我该如何实现这一目标 每次路由切换时 React 路由器都会重新安装每个组件 已经有人问过这个问题
  • 检测 html 选择框上的编程更改

    有没有办法让 HTML 选择元素在每次以编程方式更改其选择时调用函数 当使用 JavaScript 修改选择框中的当前选择时 IE 和 FF 都不会触发 onchange 此外 更改选择的 js 函数是框架的一部分 因此我无法更改它以在结束
  • javascript从字符串创建不区分大小写的正则表达式

    我试图通过以不区分大小写的方式将输入与正则表达式匹配来进行验证 正则表达式作为对象上的字符串从服务中下来 我可能会得到类似的东西 regex ane 我可以执行以下操作 var rx new RegExp object regex The
  • 使用 FormData 上传 JavaScript Blob

    我在将 javascript 创建的 blob 上传到我的服务器时遇到问题 基本思想是用户上传图像 在 javascript 中我对图像进行居中裁剪并在传输之前对其进行下采样 图像处理工作正常 但上传本身无法正常工作 这是执行从 canva
  • 引导网格中的绘图图周围有巨大的空白

    我有一个 Net 应用程序 我试图在其中使用创建一个图表bootstrap js and plotly js 当我创建响应式图表时 我遇到网格中存在巨大空白的问题 我发现问题的一部分是plotly svg container的大小默认高度为
  • 加载谷歌地图控件时是否有事件?

    我知道tilesloaded 但控件似乎在该事件之后加载 我基本上希望能够通过 jQuery 获取控件 但甚至找不到正确的监听 我也刚刚处理了 没有类似的事件 在控件可见之前空闲和tilesloaded触发 因此 基本上将 特殊控制 类添加

随机推荐

  • 在 Java 中从字符串中解析对象

    我正在尝试编写一个通用方法来解析字符串中的对象 需要明确的是 我有以下不太优雅的实现 public static Object parseObjectFromString String s Class class throws Except
  • 我应该同步静态易失性变量吗?

    关于这个主题有几个问题 但大多数都回避了这个问题 因为这不是问题的意图 如果我的类中有一个静态易失性 private static volatile MyObj obj null 在下面的方法中我这样做 public MyObj getMy
  • RxJs:条件为真时缓冲事件,条件为假时传递事件

    我在下面创建了 Observable 构造函数 其工作原理如下 有谁知道是否有更简洁的方法使用 RxJ 附带的运算符来实现相同的行为 我在看缓冲区切换 http reactivex io rxjs class es6 Observable
  • 根据另一列中的 4 个值创建新列

    我想根据另一列中的 4 个值创建一个新列 if col1 1 then col2 G if col1 2 then col2 H if col1 3 then col2 J if col1 4 then col2 K 我如何在 R 中执行此
  • Raphaeljs 库和智能手机

    我使用了名为 worderfull 的 javascript 库拉斐尔伊斯 http raphaeljs com 在我的网站上绘制地图 动画和动画功能 我注意到使用这个库的脚本与iPhone但不与Android 有人可以确认这一点吗 只需进
  • 未定义的行为追溯是否意味着不能保证早期可见的副作用?

    在 C 中 如果我正确理解措辞 编译器可以假设不会发生 UB 从而影响将遇到 UB 但尚未遇到的执行路径中的行为 甚至是 I O 等可见的副作用 在抽象机遇到 UB 之前 C 是否需要 正确 执行程序直至最后可见的副作用 编译器似乎以这种方
  • 从源代码管理中排除在 Visual Studio 2013 中实际上不起作用?

    我已通过 文件 gt 源代码管理 gt 高级 gt 从源代码管理中排除 选项从 Visual Studio 2013 中的源代码管理中排除了某些文件 我看到我的目标文件旁边弹出一个小图标 上面写着 从源代码管理中排除 但是 每次对同一文件进
  • C# Visual Studio 单元测试,模拟客户端 IP 地址

    我正在编写一些单元测试 当尝试执行以下操作时 我的真实代码抛出了异常 string IPaddress HttpContext Current Request UserHostName ToString 有没有一种方法可以模拟 IP 地址
  • 在 PHP 中创建(日期,值)的数组/集合/列表

    我正在编写一个 PHP 脚本 其中输入为 From date To date 然后我想获取该日期范围并创建一个具有以下内容的某种数组 Array date x 当我将每个日期添加到数组中时 我将计算与之相关的值 对于 NET 我会 突然想到
  • iOS 应用程序提交中的导出合规性

    我制作了一个新应用程序并想提交到应用程序商店 但在最终提交时 有出口合规性检查 我应该检查什么是或否 我在我的应用程序中使用 https url 请帮我 提前致谢 当你知道你ARE符合导出要求 您可以将其放入您的 Info plist 中
  • 如何计算数字和数学运算符的数组(或字符串)

    我正在制作一个计算器 并将单击的所有数字和运算符推送 保存到数组和字符串中 我想知道哪个approach 在这种情况下是最好的 从输入生成字符串或数组OR我想不出更好的方法 我想计算数组或字符串 该字符串给出了错误的答案 我不知道如何计算数
  • UIMA 与 Spark

    正如中所述here https spark summit org 2014 leveraging uima in spark UIMA 和 Spark 在分发基础设施方面有一些重叠 我本来打算将 UIMA 与 Spark 一起使用 现在我要
  • 你能阻止 StreamReader 处理底层流吗?

    有没有办法做到这一点 this logFile File Open what r u doing log FileMode OpenOrCreate FileAccess ReadWrite using var sr new StreamR
  • 在 Pandas 中将索引转换为 MultiIndex(分层索引)

    在我正在使用的数据中 索引是复合的 即它既有项目名称又有时间戳 例如 email protected cdn cgi l email protection 2013 05 07 05 52 51 0200 我想要进行分层索引 以便将相同的电
  • java.io.IOException:android中连接上的流意外结束

    我有网络服务 URL 它工作正常 它给出了 JSON 数据 当我使用时HttpURLConnection and InputStream 我收到此错误 java io IOException unexpected end of stream
  • 使用 Selenium 在 Firefox 上单击 Javascript 链接

    我试图从汽车博客上获取一些评论 Jalopnik http jalopnik com 5912009 prius driver beat up after taking out two bikers 它最初并不随网页一起提供 而是通过一些
  • 在android中管理工具栏的导航和后退按钮从片段到片段

    我所有的片段都是通过控制的ActionBarActivity 主要活动 里面主要活动 a DrawerLayout已实现 所有子片段均通过抽屉布局的列表项单击推送 我面临的问题是通过抽屉布局推送片段后我想将抽屉图标更改为后退图标ToolBa
  • 如何对包含 EntityFunctions.AddDays 函数的 GetNewValues() 进行单元测试

    下面的示例代码在生产中运行良好 但不能是单元 因为 EntityFunctions 进行了测试 我的单元测试项目正在使用 InMemoryDatabase 而不是真正的 SQL 数据库 我可以轻松解决我的问题 通过在 SQL 数据库中使用计
  • 为什么 Clang 决定允许在 C++ 中指定初始值设定项?

    我认为指定的初始值设定项在 C 中已不再使用 只能在 C 中使用 但是 我遇到了一个简单的示例 它可以在 clang 中编译并正常工作 int main int a 6 4 29 2 15 g https rextester com AXI
  • 无法阻止表单以空输入提交

    当任何输入为空时 我无法阻止表单提交 它没有出错 但也没有停止提交 我在表单提交输入中调用了该函数 它位于 onClick 调用下 JS File function stopSubmit var inDay document getElem