我最近发现:invalid伪类会立即应用于required表单元素，即使在页面加载时。例如，如果你有以下代码：
<style>
input:invalid { background-color: pink; color: white; }
input:valid { background-color: white; color: black; }
</style>
…
<input name="foo" required />
然后您的页面将显示一个空的粉色输入框。内置HTML5验证非常好，但我认为大多数用户不希望在他们有机会输入任何值之前进行表单验证。是否有任何方法可以延迟伪类的应用，直到第一个影响该元素的事件（表单提交、失去焦点、更改或其他适当的事件）？是否可以在不使用JavaScript的情况下实现这一点？
http://www.alistapart.com/articles/forward-thinking-form-validation/
由于我们只想在一个字段获得焦点后才表示它无效，因此我们使用焦点伪类来触发无效的样式。（显然，从一开始标记所有必填字段为无效将是一个不好的设计选择。）
按照这个逻辑，您的代码将看起来像这样...
<style>
input:focus:required:invalid {background-color: pink; color: white;}
input:required:valid {background-color: white; color: black; }
</style>
在这里创建了一个范例：http://jsfiddle.net/tbERP/
正如你所想象的，并且从这个范例中也可以看到，这种技术只有在元素获得焦点时才显示验证样式。一旦你把焦点移开，无论它是否有效，样式都会被删除。这绝对不是理想情况。
#myform:submitted input:required:invalid。因为即使当前情况确实不直观，但不能指望CSS知道在特定情况下字段无效（只要它知道，为什么不立即执行呢？），所以您真正想要的是将输入样式与表单状态绑定在一起，而不是与输入本身绑定（例如，当必填字段为空且父表单已提交时）。 - Anthonyform.submitted input:required:invalid。 - Anthony:valid 或 :invalid 输入类型应该存在相同的问题。如果输入类型为 integer 并且没有填写任何内容，则应将其呈现为无效，因为空白不是有效的数字值。唯一之所以这不是问题，是因为在 required 属性之外，空值被认为是有效值。 - Anthony这些答案已经过时了。现在你可以通过使用CSS检查占位符伪类来执行此操作。
input:not(:placeholder-shown):invalid {
background-color: salmon;
}
form:invalid button {
background-color: salmon;
pointer-events: none;
}<form>
<input type="email" placeholder="me@example.com" required>
<button type="submit">Submit</button>
</form>当您输入不完整的电子邮件地址时，它会从正常的背景变成粉色。
:placeholder-shown伪类根本不受支持。 https://caniuse.com/#feat=css-placeholder-shown - Leo Napoleon// use $.fn.one here to fire the event only once.
$(':required').one('blur keydown', function() {
console.log('touched', this);
$(this).addClass('touched');
});/**
* All required inputs initially are yellow.
*/
:required {
background-color: lightyellow;
}
/**
* If a required input has been touched and is valid, it should be white.
*/
.touched:required:valid {
background-color: white;
}
/**
* If a required input has been touched and is invalid, it should be pink.
*/
.touched:required:invalid {
background-color: pink;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
<label>
Name:
<input type="text" required> *required
</label>
</p>
<p>
<label>Age:
<input type="text">
</label>
</p>:-moz-ui-invalid 伪类来解决这个问题，该伪类仅适用于与表单交互后的情况。由于缺乏支持，MDN 不建议使用它。但是，您可以对 Firefox 进行修改。:user-invalid 即将推出，它将提供类似的行为。这是一个使用VanillaJS（不需要jQuery）的版本，基于kzh的答案。
{
let f = function() {
this.classList.add('touched')
}
document
.querySelectorAll('input')
.forEach((e) => {
e.addEventListener('blur', f, false)
e.addEventListener('keydown', f, false)
})
}/**
* All required inputs initially are yellow.
*/
:required {
background-color: lightyellow;
}
/**
* If a required input has been touched and is valid, it should be white.
*/
.touched:required:valid {
background-color: white;
}
/**
* If a required input has been touched and is invalid, it should be pink.
*/
.touched:required:invalid {
background-color: pink;
}<p><label>
Name:
<input type="text" required> *required
</label></p>
<p><label>Age:
<input type="text">
</label></p>querySelectorAll 替换为 getElementsByTagName，因为在我的机器上它快了大约 17000 倍！自己测试一下：https://jsperf.com/queryselectorall-vs-getelementsbytagname - BoltgoltgetElementsByTagName 替换 querySelectorAll 这么容易就能得到更快的解决方案呢？我个人认为这更多是选择合适的工具来完成工作。 - Boltgolt<form/>元素上添加novalidate属性和data-validate-on="blur"属性。这将监视该类型的第一个事件。这样，您仍然可以使用本地的:invalid CSS选择器进行表单样式设置。$(function () {
$('[data-validate-on]').each(function () {
var $form = $(this);
var event_name = $form.data('validate-on');
$form.one(event_name, ':input', function (event) {
$form.removeAttr('novalidate');
});
});
});
在表单元素提交前，会触发一个名为html5 invalid的事件，用于检测元素是否通过checkValidity检查。你可以利用这个事件来添加一个类，例如将其应用于周围的表单，并在此事件发生后仅显示 :invalid 样式。
$("form input, form select, form textarea").on("invalid", function() {
$(this).closest('form').addClass('invalid');
});
您的CSS代码应该如下所示：
:invalid { box-shadow: none; }
.invalid input:invalid,
.invalid textarea:invalid,
.invalid select:invalid { border: 1px solid #A90909 !important; background-color: #EEC2C2; }
继agouseh的想法之后，您可以使用一些javascript来检测提交按钮何时被关注，并在此时显示验证。
当提交按钮被关注或点击时，javascript将向表单字段添加一个类（例如submit-focussed），这样就可以使用CSS对无效输入进行样式处理。
这遵循最佳实践，即在用户完成填写字段后显示验证反馈，因为根据研究，在过程中显示验证并没有额外的好处。
document
.querySelector('input[type=submit]')
.onfocus = function() {
this
.closest('form')
.classList
.add('submit-focussed');
};form.submit-focussed input:invalid {
border: thin solid red;
}<form>
<label>Email <input type="email" required="" /></label>
<input type="submit" />
</form>(function($) {
$('input[type=submit]').on('focus', function() {
$(this)
.parent('form')
.addClass('submit-focussed');
});
})(jQuery); /* WordPress compatible */
input.dirty:invalid{ color: red; }
input.dirty:valid{ color: green; }
JS：
// Function to add class to target element
function makeDirty(e){
e.target.classList.toggle('dirty');
}
// get form inputs
var inputs = document.forms[0].elements;
// bind events to all inputs
for(let input of inputs){
input.addEventListener('invalid', makeDirty);
input.addEventListener('blur', makeDirty);
input.addEventListener('valid', makeDirty);
}
<style>
input.touched:invalid { background-color: pink; color: white; }
input.touched:valid { background-color: white; color: black; }
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
var required = document.querySelectorAll('input:required');
for (var i = 0; i < required.length; ++i) {
(function(elem) {
function removeClass(name) {
if (elem.classList) elem.classList.remove(name);
else
elem.className = elem.className.replace(
RegExp('(^|\\s)\\s*' + name + '(?:\\s+|$)'),
function (match, leading) {return leading;}
);
}
function addClass(name) {
removeClass(name);
if (elem.classList) elem.classList.add(name);
else elem.className += ' ' + name;
}
// If you require a class, and you use JS to add it, you end up
// not showing pink at all if JS is disabled.
// One workaround is to have the class on all your elements anyway,
// and remove it when you set up proper validation.
// The main problem with that is that without JS, you see what you're
// already seeing, and stuff looks hideous.
// Unfortunately, you kinda have to pick one or the other.
// Let non-blank elements stay "touched", if they are already,
// so other stuff can make the element :invalid if need be
if (elem.value == '') addClass('touched');
elem.addEventListener('blur', function() {
addClass('touched');
});
// Oh, and when the form submits, they need to know about everything
if (elem.form) {
elem.form.addEventListener('submit', function() {
addClass('touched');
});
};
})(required[i]);
}
});
</script>
当然，这段代码在IE8及以下版本中不会起作用，因为(a) DOMContentLoaded 是相对较新的技术，在IE8发布时并未成为标准，(b) IE8使用attachEvent而不是DOM标准的addEventListener，(c) IE8不支持HTML 5，因此不会关注:required。
makeDirty不应该切换脏类，而应该在未来（蓝色，无效，有效）事件上保持它。函数makeDirty(e){ if (!e.target.classList.contains('dirty')) e.target.classList.add('dirty'); } - Abir Stolov