除非启用 JavaScript，否则不要提交表单答案

【问题标题】：Don't submit form unless JavaScript is enabled除非启用 JavaScript，否则不要提交表单
【发布时间】：2011-01-25 15:46:21
【问题描述】：

我有一个用于会员注册的基本表格。我正在使用表单 onsubmit 事件来填充基于某些表单字段的隐藏表单字段。它工作得很好，但如果没有启用 javascript，我想阻止表单提交。这将确保隐藏字段在客户端计算机上正确填充。

我意识到在不启用 javascript 的情况下支持注册可能是最佳做法，但我想使用我现有的当前解决方案运行

<form id='member_form' method="post" action="http://www.mysite.com/" onsubmit="build_username();" >

【问题讨论】：

攻击者可以使用 TamperData for firefox 绕过此问题。您不应该依赖强迫人们运行客户端代码。
只是一个想法，但是如果您要花费精力在没有启用 JS 的情况下使表单无法提交，为什么不利用这段时间使其在没有 JS 的情况下工作？
我的技能仅限于 javascript，并且我正在使用商业 cms 进行注册表单。我怀疑 99% 的用户没有启用 javascript？
这是一个公平的观点，我只是想知道是否值得发布一个关于让表单在没有 JS 的情况下工作的不同问题。

标签： javascript validation forms

【解决方案1】：

如果他们需要 javascript 来提交表单，那么即使向他们展示表单也没有意义。

鉴于此，我会推荐这样的东西

<noscript>
  You cannot register without javascript enabled.
</noscript>

<form id="registration" style="display: none">
  <!-- form stuff here -->
</form>

<script type="text/javascript">
  document.getElementById( 'registration' ).style.display = 'block';
</script>

这有点俗气和黑客，但是一个简单的网络表单需要 javascript。

【讨论】：

不显示的表单难道不能按回车键提交吗？
不，我不这么认为。据我所知，您需要能够专注于表单才能让 enter 键触发提交事件。

【解决方案2】：

问题是表单默认是可提交的。

你不能把表单的action属性去掉，以后再用JavaScript添加，因为浏览器会使用当前页面作为action，仍然可以提交表单。

此外，删除“提交”按钮也无济于事，因为仍然可以使用 enter 键提交表单。

但是，我向你提交了这个邪恶的想法（双关语不是故意的！）：

<form action="#">
  ....
</form>

这使得表单一开始实际上是不可提交的，因为提交目标是当前页面。

然后您将使用 JavaScript 设置正确的 action 属性。

我想不出任何原因为什么这不能在浏览器中可靠地工作，除了尝试提交它会使浏览器跳转到页面顶部，因为哈希 #。

【讨论】：

如果你使用 '#undefined'、'#null' 或 '#n' 作为可以消除跳动的动作（尽管我讨厌助长邪恶的想法）:)
这对可用性不利。（未启用 js 的）用户将尝试提交表单并且不知道它为什么不起作用。我意识到这个解决方案有效，但我个人不会使用它。
@Peter 完全正确。提交按钮也必须被隐藏，并且 <noscript> 标签包含一个很大的“请激活 JavaScript”，以避免混淆用户。
这是不正确的。 <form action="#"> 将触发将表单提交回服务器以获取同一页面。您可以使用 Fiddler 或 Charles 等 HTTP 检查工具来验证这一点。
第二个西蒙，这确实会触发同一页面上的表单提交。

【解决方案3】：

隐藏提交按钮将不起作用，因为如果您在input type="text" 中按回车，浏览器将尝试提交表单。

您可能想尝试的是通过 JavaScript 添加 form 元素（即在您的 HTML 中没有它）。

【讨论】：

可行但复杂：您必须将form 放在现有的表单元素周围。为此，您必须创建表单元素，将其附加到文档，然后将表单字段移动/复制到元素中。我很确定带有选定文件的文件输入字段将无法生存。如果不涉及文件输入，这可能是一种可行的方式。
您可以将input 字段放在div 中，然后创建form 并使div 成为form 的孩子。

【解决方案4】：

一种方法是将隐藏字段默认为hunter2 之类的内容，然后在提交表单时，让javascript 将其更改为其他内容。然后你就可以知道用户是否启用了javascript。

【讨论】：

【解决方案5】：

为什么不默认隐藏提交按钮并使用 JavaScript 显示呢？这不会阻止用户通过按 enter 键提交表单，但它会修剪数字。您还可以显示一条带有 NOSCRIPT html 元素的消息，告诉用户启用 JavaScript。

【讨论】：

【解决方案6】：

只需删除任何 <input type="submit"> 或 <input type="image"> 并将它们替换为使用 JavaScript 触发表单提交的按钮/图像。如果在禁用 JavaScript 时没有触发提交的控件，您将有理由确定提交来自 JavaScript。请记住，聪明的用户、损坏的浏览器和其他奇怪的东西将确保无论如何都会提交损坏或无效的数据。

【讨论】：