html - 将空的非必需输入字段变为无效

Question

我需要知道如何制作一个empty-non-required input元素无效。

例如:

<input pattern="[0-9]+" title="" />

此字段默认为:valid，因为这不是必需的。如果它是空的，我需要把它变成:invalid。

提前谢谢大家。干杯。

编辑:

HTML:

<div>
    <input type="text" name="Country" pattern="[a-zA-Z ]+" title="" placeholder="Country" />
    <a href="#">Toggle</a>
</div>

CSS:

input:valid + a
{
    color: blue;
}

<a>开始为蓝色，因为 <input> 中没有文本这不是必需的。

empty-non-required 的伪类:valid 状态 <input>元素为 true。

我需要 <a>在 <input> 时保持无色字段为空。

Answer 1

您需要添加属性 required，它与 pattern 属性具有相同的(有限但不断增长的)浏览器支持。无法使“空的非必需”元素无效，因为 required attribute 意味着该值必须是非空的。

pattern attribute 的描述在 HTML5 CR 中表示仅当值不为空时才在约束验证中使用该属性。也可以这样说，空字符串始终被视为与模式匹配(但实际上甚至没有对其进行检查)。