2

我需要知道如何使空的非必需 input元素无效。

例如：

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

该字段默认为:valid，因为不是必需的。我需要转动它：如果它是空的，则无效。

谢谢大家。干杯。

编辑：

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>。

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

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

4

2 回答 2

4

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

patternHTML5 CR 中对属性的描述说该属性仅在值不为空时用于约束验证。这也可以说是空字符串始终被视为与模式匹配（但实际上甚至没有对其进行检查）。

于 2013-10-11T05:12:27.320 回答
1

这个答案解决了澄清/修改的问题，这似乎是关于样式的。如果元素的值为空，则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与左侧一样。:valid关于浏览器覆盖率，与使用伪类引起的基本限制相比，这可能不是问题，IE 9 及更早版本不支持。

于 2013-10-12T10:25:27.683 回答