如何制作伪类：无效申请提交表格后的输入

Question

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

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

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

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

如何在单击“提交”按钮后应用input:invalid以及错误消息？

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>