手动激活“数据错误”属性

Question

是否可以使用javascript手动激活标签中的数据错误？

我想做的是检查两个输入字段是否相同，如果不触发标签中的数据错误。

html

<input id="email" type="email" class="validate">
<label for="email">Email</label>
<input id="check_email" type="email" class="validate">
<label for="check_email" data-error="Re-typed email must match">Re-type email</label>

在我的javascript中，我主要检查check_email值是否与电子邮件值匹配。如果不是，那就是我想要激活数据错误的时候。

Answer 1

如果check_email值与电子邮件值不匹配，则需要将以下内容添加到JS中：

$("#check_email").addClass("invalid");
$("#check_email").prop("aria-invalid", "true");

您可以参考此代码笔以获得更好的清晰度

Answer 2

我已经为这个问题挣扎了几个小时，直到我找到了一个有点天真和暴力的解决方案：

$("#signinUsername").next("label").attr('data-error','The name field is required');
$("#signinUsername").removeClass("valid");
$("#signinUsername").addClass("invalid");

虽然它看起来很丑，但它很管用。