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 表示该值必须为非空。

HTML5 CR中pattern attribute的说明只有在值不为空时才会在约束验证中使用该属性。这也可以说是一个空字符串总是被视为与模式匹配（但实际上甚至没有对它进行检查）。

Answer 2

这个答案解决了澄清/修改过的问题，这个问题似乎与造型有关。 input元素如果其值为空则无法匹配选择器:invalid，因为此类元素免于约束验证（如我的第一个答案中所述）。没有选择器用于检查input元素的值是空还是非空。（内容的:empty伪类测试为空，input元素始终为空内容。）

所以这不能在CSS（单独）中完成。您可以使用JavaScript，例如这样任何输入操作都会导致检查input元素值。如果值为非空，请将input元素添加到类中，例如ok。相应地修改CSS选择器。

 <style>
 input:valid + a.ok {
   color: blue;
 }     
 </style>
 <input ... oninput=check(this)>
 ...
<script>
function check(el) {
  el.nextElementSibling.className = el.value ? 'ok' : '';
}

这适用于足够现代的浏览器。如果需要更广泛的浏览器覆盖范围，您可能需要添加用于运行相同检查的事件属性，如onkeypress和onpaste等。（nextElementSibling可能需要用一些更笨拙的方式来取代下一个元素。）

更新，根据下面的评论，您可以通过在input元素而不是a元素上设置类来稍微简化代码。这意味着CSS选择器将是input:valid.ok + a，而JavaScript赋值语句将只有el.className作为左侧。关于浏览器覆盖率，与使用{9}}伪类的基本限制相比，这可能不是问题，IE 9及更早版本不支持。

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

2 个答案: