为什么在 <input type=number> 中输入非数字值时 Chrome 仍会提交表单？答案

【问题标题】：Why is Chrome still submitting a form when a non-numeric value is entered in <input type=number>?为什么在 <input type=number> 中输入非数字值时 Chrome 仍会提交表单？
【发布时间】：2014-07-15 14:12:01
【问题描述】：

我正在用 ASP.NET MVC 开发一个 Web 应用程序。

当将视图中的字段绑定到模型中的整数属性时，MVC 使用type="number" 属性生成如下 HTML：

<input data-val="true" 
  data-val-number="The field MessageControlIdFrom must be a number."
  id="Filter_MessageControlIdFrom"
  name="Filter.MessageControlIdFrom"
  type="number"
  value="">

这很好，Chrome 识别出它需要一个数字并在输入字段中添加增量/减量控件。

如果我在输入非数字值时尝试提交表单，我会短暂看到一条我认为是由 Chrome 生成的验证消息：

但是问题是表单仍然提交数据并将数据发送回服务器。我怎样才能防止这种情况发生？

更新

这似乎会影响 Chrome v34 和 v35；但是在 Firefox v30 中，行为符合预期，并且由于验证错误而不会发生提交。

正如@pawel 在 cmets 中指出的那样，this fiddle 在 Chrome v34 和 v35 中确实按预期工作（它不提交）。因此，我认为这是我的应用程序和 Chrome 的组合所特有的。

我将尝试创建一个简化的应用程序来重现问题。

【问题讨论】：

你不使用jquery验证吗？与 MVC 一起打包的标准？类似@section Scripts { @Scripts.Render("~/bundles/jqueryval") }
jsfiddle.net/x5x2y 似乎按预期工作：Chrome 会显示一个气泡，如果值不是数字，则不会提交表单。
@pawel 谢谢，我同意它有效。显然我错过了一些东西 - 将尝试将问题减少到重现。

标签： html forms validation google-chrome

【解决方案1】：

我在客户端使用类似 this 的东西：(jQuery)

// Prevent NULL input and replace text.
$(document).on('change', 'input[type="number"]', function (event) {
    this.value = this.value.replace(/[^0-9]+/g, '');
    if (this.value < 1) this.value = 0;
});

// Block non-numeric chars.
$(document).on('keypress', 'input[type="number"]', function (event) {
    return (((event.which > 47) && (event.which < 58)) || (event.which == 13));
});

但您也应该始终在服务器端进行验证。

【讨论】：

感谢您的回答；我认为这会解决问题，但我更感兴趣的是为什么浏览器仍然允许提交表单。
你不能（还）依赖浏览器来正确处理 HTML5 输入。它也因浏览器而异，它们当前的处理方式也有所不同。

【解决方案2】：

你应该像这样使用 HTML5 pattern 属性：

<input type="text" pattern="\d*" />

\d 是数字的正则表达式，* 表示它接受多个数字。

我认为这是阻止表单提交的更好方法。这肯定会起作用。

【讨论】：

感谢您的回答；虽然这可以解决问题，但 ASP.NET MVC 会自动放置 <input type="number">，我不确定是否可以覆盖。

【解决方案3】：

在此处查看此示例：http://api.jquery.com/submit/ 他们使用户键入“正确”值。我认为您可以做类似的事情，除了致电if(typeof $('#myTextArea') == "number") 并从那里执行您的检查。

希望这会有所帮助。

【讨论】：

不幸的是，我认为这行不通，因为浏览器不允许您拥有 <input> 元素的值，除非它是数字！

【解决方案4】：

我现在已经弄清楚为什么尽管没有输入数字，但表单仍在提交。

有一个单独的点击事件绑定到$(document).ready() 上的提交按钮，如下所示：

$("#btnFilter").click(firstPage);

firstPage 函数如下所示：

function firstPage() {
    $(".hiddenPager").val(1);
    $("form:first").submit();
}

我不确定这是否完全解释了它，因为该函数仍在调用 .submit()，由于数字输入字段中的 abc，我认为 Chrome 不会支持该函数。不过，我现在知道我需要更改哪些内容才能停止提交。

Firefox 的行为符合预期，但未提交。

【讨论】：