HTML5的checkValidity方法认为空输入是合法的。

Question

假设有以下文档：

<input pattern="[a-z]"/>

在不填写输入的情况下运行：

document.querySelector('input').checkValidity()

返回true。

由于一个空的输入不会匹配[a-z]，所以为什么HTML5 checkValidity()返回true？

- mikemaccana

Answer 1

使用required可以防止验证空输入。

<input pattern="[a-z]" required />

- Konstantin Dinev

---

这个设计决策背后的理念，当然是为了能够验证可选字段。 - Álvaro González

您可以验证整个表单（验证所有包含的输入），也可以分别验证字段并相应地采取行动。这两种选项都有优缺点。 - jorgefpastor

Answer 2

您可以通过添加检查来避免添加“required”，以确保您的值不为空。这很明显，但我想在这里提及一下，因为我没有发布此输入并添加“required”会强制用户输入值，而这不是我所需要的。

if (myCustomJavaScript.notFalsy($input.val()) && $input[0].checkValidity()) {
 // Submit AJAX request.
}

- RatherBKnitting