表单checkValidity（）不标记失败的输入

Question

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

该方法以这种方式调用：

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

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

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

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

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

Answer 1

checkValidity-method不会将任何类添加到输入中。您必须使用CSS-pseudoclass :invalid之类的

input:invalid {
    background: red;
}

看到它标记为无效。 添加/删除＆＃34;必需＆＃34;应该工作正常。

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

Answer 2

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

我也遇到过。就我而言，我将表单内的 button type="click 更改为 button type="submit，并且 html5 验证工作正常。