如何使伪类：无效应用于提交表单后的输入答案

【问题标题】：How to make pseudo class :invalid apply to an input AFTER submitting a form如何使伪类：无效应用于提交表单后的输入
【发布时间】：2017-01-12 17:32:11
【问题描述】：

我创建了一个表单，并决定只使用 HTML5 和一些 JS 来验证它，而不需要任何额外的插件。所以我所有需要的输入都有required 属性。

这是让它们看起来不错的 CSS

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

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

点击提交按钮后如何使input:invalid应用，以及错误信息？

【问题讨论】：

标签： javascript html css forms validation

【解决方案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>

【讨论】：

最好在表单上添加一个submit事件监听器而不是按钮上的点击监听器，这样如果表单是通过在输入中按回车（或任何其他方式)，那么这仍然有效。你也不必做第二个选择器：document.getElementById("testForm").addEventListener("submit", function(){ this.className="submitted"; })
@idlefingers 除了 OP 使用 HTML5 表单验证，它不会触发提交事件。

【解决方案2】：

基于 Thomas 的解决方案和 idlefinger 的评论，我建议收听 HTML5 invalid event，它会在提交事件之前触发。

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

【讨论】：

【解决方案3】：

这对我有用：

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

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

【讨论】：