HTML novalidate 属性

HTML novalidate 语法

在 HTML 中，novalidate 用于定义在提交表单时是否要跳过内置的验证功能。只有 form 元素支持 novalidate 属性。

语法：

<form novalidate>
</form>

说明：

novalidate 是一个布尔属性。在 HTML5 中，以下两种写法是等价的。

<!--写法1-->
<form novalidate>

<!--写法2-->
<form novalidate="novalidate">

当 novalidate 属性存在时，即使表单中的 input 元素设置了 required、pattern、type="email" 等验证属性，浏览器也不会阻止表单提交。如果你想要阻止表单提交，应该使用 JavaScript 进行自定义验证。

什么是布尔属性？

布尔属性（Boolean Attributes），是一种特殊的 HTML 属性。它们的存在本身就表示一个 true（真）值，而它们的缺失则表示 false（假）值。这些属性不需要显式赋值（如 true 或 false），只要属性名存在即可。

就拿 required 属性来说：

<input type="text" required>：表示这个文本输入框是 “必填” 的。
<input type="text">：表示这个文本输入框是 “非必填” 的。

对于布尔属性来说，虽然下面 2 种写法是等价的。但 HTML5 更加推荐写法 1（即只写属性名、不带任何值）

<!--写法1：推荐-->
<input type="text" required>

<!--写法2-->
<input type="text" required="required">

注意，下面这种写法是错误的。

<!--错误写法-->
<input type="text" required="true">

其中，常见的布尔属性有：

autofocus：页面加载时，元素自动获得焦点。
hidden：是否隐藏元素。
checked：是否选中，用于单选按钮和复选框。
disabled：是否禁用。
readonly：是否只读。
required：是否必填，用于 input、textarea 和 select 元素。
selected：是否选中，用于 option 元素。
multiple：是允许多选，用于 input 和 select 元素。
novalidate：是否跳过内置的验证功能，用于 form 元素。
autoplay：是否自动播放，用于 audio 和 video 元素。
loop：是否循环播放，用于 audio 和 video 元素。

HTML novalidate 摘要

适用元素	form
使用频率	中
兼容性	查看
官方文档	查看
MDN	查看

HTML novalidate 示例

接下来，我们通过一个简单的例子来讲解一下 HTML novalidate 属性是如何使用的。

示例：novalidate 属性的基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        input:invalid {
            border: 1px solid red;
        }
        input:valid {
            border: 1px solid green;
        }
    </style>
</head>
<body>
    <form action="/register" method="post" novalidate>
        <p>
            <label>
                昵称（必填）：
                <input type="text" name="nickname" required>
            </label>
        </p>
        <p>
            <label>
                邮箱（必填）：
                <input type="email" name="email" required>
            </label>
        </p>
        <p>
            <button type="submit">提交</button>
        </p>
    </form>
</body>
</html>

页面效果如下图所示。

HTML novalidate 属性示例

分析：

需要注意的是，novalidate 属性的作用是禁止浏览器在提交时进行默认的验证拦截（即不弹出错误提示气泡，也不阻止提交）。但它不会影响 CSS 伪类 :valid 和 :invalid 的判断。

就拿上面例子来说，虽然我们给 form 标签设置了 novalidate 属性，但是当我们单击【提交】按钮之后，依然是可以向服务器提交表单的。

提示: 如果想要实现表单内容不符合条件时，阻止表单提交，我们应该使用 JavaScript 来控制。