HTML5验证不触发

Question

我正致力于为输入进行客户端验证。 我曾经使用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>

出现通知时我错过了什么？

Answer 1

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

<input type="email">

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

有关HTML5中新输入字段的详情，请参见W3Schools。

Answer 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>