html - 将空的非必填输入字段设为无效

Question

我需要知道如何创建一个空非必需 input元素无效。

例如:

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

此字段默认为:有效，但不是必需的。如果它是空的，我需要将其变为:无效。

提前谢谢大家。干杯。

编辑:

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> 内没有文本，因此以蓝色开头这不是必需的。

空非必需的伪类:有效状态<input>元素为true。

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

Answer 1

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

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