如何在提交表单后使伪类:invalid适用于输入框

Question

我创建了一个表单，并决定只使用HTML5和一些JS进行验证，而不需要任何其他插件。因此，我所有必需的输入都具有 required 属性。

以下是用于使它们看起来漂亮的CSS：

input:invalid {
    border: 2px solid #c15f5f
}

即使尚未被触摸，它会将invalid输入的边框设置为红色。

如何使input:invalid在单击提交按钮后应用，并与错误消息一起显示？

- Jakub Małojło

Answer 1

当提交按钮被点击时，您可以为表单添加一个类，然后调整您的CSS选择器，使其仅匹配已提交表单中的输入字段：

document.getElementById("submitButton").addEventListener("click", function(){
 document.getElementById("testForm").className="submitted";
});

form.submitted input:invalid{
  border:1px solid red;
}

<form id="testForm">
<input type="text" required>
<input type="submit" value="submit" id="submitButton">
</form>

- Thomas Altmann

---

最好在表单上添加一个“submit”事件监听器，而不是在按钮上添加一个点击监听器，这样如果通过输入框按回车键（或其他方式）提交表单，则仍然可以正常工作。您也可以不必进行第二个选择器：document.getElementById("testForm").addEventListener("submit", function(){this.className="submitted";})。 - idlefingers

除了 OP 使用 HTML5 表单验证不会触发提交事件之外，@idlefingers。 - Luke

Answer 2

在Thomas的解决方案和idlefinger的评论基础上，我建议监听HTML5无效事件，它会在提交事件之前触发。

// save all form controls as variable
var inputs = document.getElementById("your-form").elements;

// Iterate over the form controls
for (i = 0; i < inputs.length; i++) {

  inputs[i].addEventListener("invalid", function(){
    document.getElementById("your-form").className="submitted";

  });
};

form input {
    background: #eee;
}

form.submitted input:invalid {
    background: #ff3b3b;
}

<form id="your-form">
    <input type="text" required>
    <input type="text">
    <input type="submit" value="submit">
</form>

- Luke

Answer 3

这对我有用：

input:invalid:not([value='']) {
    outline: none;
    border: 2px solid #c15f5f;
}

但我更喜欢使用box-shadow而不是边框或轮廓（默认）

- Anon Legion

---

这不是一个解决方案，因为它在初始加载时仍然显示无效状态。 - Maksim Shamihulau