HTML5 checkValidity表示空输入有效

Question

鉴于以下文件：

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

不填写输入，运行：

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

返回true。

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

Answer 1

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

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

Answer 2

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

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