forms - HTML5 中的验证。 :invalid classe after submit

Question

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

有没有办法让这些字段仅在尝试提交表单后才显示突出显示，换句话说，有没有办法只有在单击提交后才运行验证(或者至少失去对必填输入字段的关注？)

Answer 1

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

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');
});