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

Question

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

该方法是这样调用的：

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

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

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

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

您还必须知道我使用 Bootstrap 4，因此失败的输入在失败时应该得到“is-invalid”类。也许“必需”属性的操作会混淆 Bootstrap ？

Answer 1

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

input:invalid {
    background: red;
}

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

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