HTML5 checkValidity 表示空输入有效

Question

给定以下文档：

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

不填写输入，运行:

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

Returns true.

既然空输入不匹配 [a-z]，为什么 HTML5 checkValidity() 返回 true？

Answer 1

使用 required 以便不验证空输入。

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

Answer 2

您可以通过添加检查以确保您的值不为空来避免必须添加 required。这很明显，但我想我会在这里提到它，因为我没有发布这个输入并且添加 required 会强制用户输入一个值，这不是我需要的。

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

HTML5 checkValidity says an empty input is valid