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

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>