延迟计算的 :invalid 选择器

Question

通常，:invalid选择器会立即进行评估：例如，如果在页面加载时需要一个值，元素将立即应用:invalid样式。

input:invalid {
  border: 10px solid red;
}

<form>
<p> Go red only after I focused and blurred away </p>
  <input required placeholder="you must type something" />
</form>

有没有办法解决这个问题，使得评估只在用户与表单交互之后发生？（通常是在第一次聚焦/失焦之后）。 我知道这是标准浏览器的实现行为，所以我们可能需要找到一个解决办法。

最小的JS是可以的，尽管我不想进行JS验证。

- George Katsanos

---

不会有快速的解决办法：要么是即时验证，要么你需要使用JS来访问约束验证API。只用“最小”量的JS可能会导致可访问性和屏幕阅读器方面的问题，而用户通常依赖逐步即时验证。这个页面A Guide To Accessible Form Validation讨论了即时、之后和提交验证与可访问性的关系，并提供了示例。 - undefined

我怀疑这就是你在寻找的（或最终要实施的）内容：无障碍表单验证指南：提交验证。 - undefined

请点击以下链接查看相关内容： https://stackoverflow.com/questions/7576190/validation-in-html5-invalid-classe-after-submit https://stackoverflow.com/questions/41619497/how-to-make-pseudo-class-invalid-apply-to-an-input-after-submitting-a-form https://stackoverflow.com/questions/27021801/inputinvalid-css-rule-is-applied-on-page-load - undefined

Answer 1

一个可能的解决方案是结合多个伪类来实现结果，如这里所解释的那样。

下面是一个示例（改编自这个Codepen），只有在值无效时（在这种情况下长度小于3个字符），才显示红色边框。

:root {
  --color-invalid: red;
  --color-valid: green;
}

.error-message {
    display: none;
}

/* Used for the demo to show that the input changes status (eg. passing from an invalid to a valid email address) */
input {
  outline: none;
}


/* Invalid state */

input:not(:placeholder-shown):invalid {
  border-color: var(--color-invalid);
}


/* Valid state */

input:not(:placeholder-shown):valid {
  border-color: var(--color-valid);
}

<form>
  <input name="name" type="text" minlength="3" maxlength="20" required placeholder="test min/max length input" />
</form>

- LS_

---

挺酷的！但如果你的唯一要求是填写输入中的任意数量字符，错误样式就永远不会出现，对吧？（或者我漏掉了什么？） - undefined

这种方法在特定条件下可能也适用（例如，存在最小/最大值），但对于基本场景来说并不适用，因为唯一的要求只是“输入一些内容”。 - undefined

@GeorgeKatsanos 我已更新示例，现在使用了一个带有minlength属性的文本输入，当用户开始输入时，错误会立即出现，并在输入3个或更多字符后更改为有效状态。这是否是预期的行为？ - undefined

不，接受任意数量的字符。我认为这种变通方法在电子邮件或需要更具体规则的情况下效果很好。 - undefined

@GeorgeKatsanos 好的，明白了！很抱歉我之前没有理解到这个要求。在这种情况下，这个解决方案就不适用了。 - undefined

Answer 2

当然。不要过早地设置required属性，你可以用某种方式标记项目（在这种情况下是一个required类），然后编写你想要触发添加required属性的事件（在这种情况下是blur）：

function myBlur() {
    this.setAttribute("required", null);
}

function myFocus() {
    this.removeAttribute("required");
}

for (let item of document.getElementsByClassName("required")) {
    item.addEventListener("blur", myBlur);
    item.addEventListener("focus", myFocus);
}

input:invalid {
  border: 10px solid red;
}

<form>
  <input class="required" placeholder="you must type something" />
</form>

在上面的例子中，我在失去焦点时添加了required属性，并在获得焦点时将其移除，这样当用户在项目获得焦点时删除内容时，它不会对用户大声喊叫，但是当项目失去焦点且没有值时，它会抱怨。

- Lajos Arpad

---

当他们点击提交按钮时，他们从未与该元素进行交互？ - undefined

在按钮验证的末尾，还可以添加required属性。在这里，我为了简洁起见只关注了最低要求，但是根据网站的逻辑，我们当然可以添加更多的处理程序和逻辑。在验证器内部，可以调用setAttribute来设置具有required类的项目，以便在提交表单时进行验证。 - undefined