HTML5 验证未触发答案

【问题标题】：HTML5 Validation Not TrigeringHTML5 验证未触发
【发布时间】：2017-01-12 07:57:03
【问题描述】：

我正在对输入进行客户端验证。我一直在使用 PHP 来完成这一切。不用说，事情很快就变得混乱了。所以我研究了 JS 和 HTML5，并希望进入该系统进行验证。

我要显示的消息是这样的：

我知道这些是通过<input type="email"> 标签完成的。

经过一些帮助，我被指向了这个页面html5rocks。

但是我似乎无法弹出任何内容。我直接从那里复制了代码，什么也没有。

<input id="foo" type="number" max="2" value="1" />
<input id="bar" type="number" max="2" value="3" />
    <script>
        document.getElementById('foo').validity.rangeOverflow; //false
        document.getElementById('bar').validity.rangeOverflow; //true
    </script>

我缺少什么来显示通知？

【问题讨论】：

其实在 HTML5 中他可以简单地使用浏览器验证的电子邮件字段。
展示努力：提供解决此问题的任何尝试。通常，这意味着提供解决问题的想法，在大多数情况下，提供解决问题的代码。
@maythesource.com：HTML 验证似乎提供了一个不太具体的错误消息。
它们是原生表单验证工具提示：html5rocks.com/en/tutorials/forms/constraintvalidation
<input type="email" /> - 为什么没有更多的人使用它？ :D

标签： html validation validity.js

【解决方案1】：

该弹出窗口是 HTML5 中的新实现。只需像这样创建一个输入字段：

<input type="email">

如果输入不是电子邮件地址，则在提交表单时会自动出现弹出窗口。

有关 HTML5 中的新输入字段的更多信息，请访问 W3Schools。

【讨论】：

如果您只需要简单了解我如何解决我的问题，请查看我的回答。

【解决方案2】：

必须在验证开始之前提交表单。

所以你必须添加一个类型为submit 的按钮，就像这样：

<input type="submit" value="blah">

然后您必须将所有字段/输入包含在 <form> 和 </form> 标记中。

这是工作代码：

<form> 
    <input id="foo" type="number" max="2" value="1" />
    <input id="bar" type="number" max="2" value="3" />
    <input type="submit" value="blah">
</form>

<script>
    document.getElementById('foo').validity.rangeOverflow; //false
    document.getElementById('bar').validity.rangeOverflow; //true
</script>

【讨论】：