在HTML5中验证.:提交后无效的classe

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

Answer 2

除了@Alexander Farkas 的帖子之外，Dave Rupert 这里还有一个非常可行的解决方案：Happier HTML5 Form Validation。

本质上，它的作用是添加一个 CSS 类来形成仅在用户尝试提交表单后才显示的输入元素。这是更好的用户体验，因为默认情况下，或者当用户通过选项卡浏览它们时，这些元素不会显示无效的样式，从而增强了可访问性。

在发现这一点之前，我尝试过使用:invalid:focus和其他伪元素来设置元素的样式，但没有获得所需的效果。尽管我尝试尽可能使用纯 CSS 进行样式设置，但这看起来像是一个高效 JS 是实用解决方案的用例。

Answer 3

非常简单，只需使用#ID：invalid：focus

仅在侧重于页面加载时才进行验证

Answer 4

不，没有什么是开箱即用的。

Mozilla拥有自己的伪类，用于类似“：-moz-ui-invalid”的名称。如果要实现这样的目标，则必须使用约束验证DOM-API：

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

您还可以使用webshims lib polyfill，这不仅将不支持polyfill的浏览器，而且还会向所有浏览器添加类似-moz-ui-invalid的东西（.form-ui-invalid）。