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

Question

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

方法是这样调用的:

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

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

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

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

你还必须知道我使用的是 Bootstrap 4，所以失败的输入在失败时应该得到“is-invalid”类。也许对“必需”属性的操作混淆了 Bootstrap？

Answer 1

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

input:invalid {
    background: red;
}

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

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