HTML提交无效,验证HTML5。 ：提交后无效类

旧问题，但是对于那些可能会觉得有用的人来说：我做了一个小脚本，它在试图提交时向表单中添加一个类，以便可以设置具有和不是ttempted以不同的方式提交：被试图提交将获得一类_submit-attempted

window.addEventListener('load', function() {

/**

* Adds a class `_submit-attempted` to a form when it's attempted to be

* submitted.

*

* This allows us to style invalid form fields differently for forms that

* have and haven't been attemted to submit.

*/

function addFormSubmitAttemptedTriggers() {

var formEls = document.querySelectorAll('form');

for (var i = 0; i < formEls.length; i++) {

function addSubmitAttemptedTrigger(formEl) {

var submitButtonEl = formEl.querySelector('input[type=submit]');

if (submitButtonEl) {

submitButtonEl.addEventListener('click', function() {

formEl.classList.add('_submit-attempted');

});

}

}

addSubmitAttemptedTrigger(formEls[i]);

}

}

addFormSubmitAttemptedTriggers();

});

现在的形式，所以你只能给这些字段红色框的阴影：

input {

box-shadow: none;

}

form._submit-attempted input {

box-shadow: 0 0 5px #F00;

}