HTML5 中的验证。 : 提交后类无效

Question

我正在构建一个表单，我想使用 :invalid 选择器为“必填”输入字段提供红色边框，如果用户按下提交而不填写它们，但是使用它会使它们在页面加载。在给用户至少一次填充的机会之前就给用户这种警告似乎是不友好的。

有没有一种方法可以让这些字段仅在尝试提交表单后才突出显示，换句话说，有没有一种方法可以仅在单击提交后运行验证（或者至少失去对所需输入字段的关注？）

原文由 Enrique Moreno Tent 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

不，开箱即用。

Mozilla 有自己的伪类，用于一些非常相似的东西，称为“:-moz-ui-invalid”。如果你想实现这样的东西，你必须使用约束验证 DOM-API：

 if(document.addEventListener){
    document.addEventListener('invalid', function(e){
        e.target.className += ' invalid';
    }, true);
}

您还可以使用 webshims lib polyfill ，它不仅会填充无能力的浏览器，还会向所有浏览器添加类似于 -moz-ui-invalid 的东西（.form-ui-invalid）。

原文由 alexander farkas 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我在我的一个项目中使用了这种方法，因此只有在提交后才会突出显示无效字段：

HTML:

 <form>
  <input type="email" required placeholder="Email Address">
  <input type="password" required placeholder="Password">
  <input type="submit" value="Sign in">
</form>

CSS：

 input.required:invalid {
    color: red;
}

JS（jQuery）：

 $('[type="submit"]').on('click', function () {
    // this adds 'required' class to all the required inputs under the same <form> as the submit button
    $(this)
        .closest('form')
        .find('[required]')
        .addClass('required');
});

原文由 Cezar D. 发布，翻译遵循 CC BY-SA 3.0 许可协议