表单checkValidity()不会标记失败的输入

Question

出于某些原因，当我在窗体上使用checkValidity()时，失败的输入不会被标记为无效。

该方法被称为这样的方法：

var result=$("#myForm")[0].checkValidity();

当输入无效时，结果为假。但是输入没有被标记为无效，没有视觉上的错误指示。

我不知道它是否相关，但也许您必须知道字段的“必需”属性是根据用户的操作动态删除或添加的，代码如下：

$('input').prop('required',false);
$('input').prop('required',true);

您还必须知道，我使用的引导带4，所以失败的输入应该得到“是-无效”的类，当他们失败。也许对“必需”属性的操作混淆了Bootstrap？

Answer 1

checkValidity-方法不会向输入添加任何类。您必须使用CSS-伪类:invalid，如

input:invalid {
    background: red;
}

看到它被标记为无效。添加/删除“必需”应能正常工作。

更多信息：https://developer.mozilla.org/de/docs/Web/CSS/:invalid

Answer 2

我知道这个问题有答案，但我提出我的答案，以便有一天它能对某人有所帮助。

这也发生在我身上。在我的例子中，我在表单中将button type="click更改为button type="submit，html5验证非常有效。