HTML5/JS/jQuery：输入无效时，将不同的（任意）元素标记为无效

我正在尝试创建一个标准的新密码表单，您可以在其中输入一次新密码，然后再次输入以进行确认。我希望一旦你模糊这些字段，如果它们不匹配，both将被标记为无效，如以下情况：

1. 用户输入密码abc into #newpassword1.
2. 用户选项卡#newpassword2.
3. 用户输入密码def into #newpassword2.
4. 用户离开。
5. 验证检测到不匹配，并标记两者#newpassword1 and #newpassword2视为无效。

我知道我可以使用以下方法将事件目标标记为无效e.target.setCustomValidity(...)，但我不太了解 JavaScript 的事件模型，也不知道如何标记不同的根据事件目标自身的无效性将元素视为无效。

这是我尝试使用的（非工作）代码的相关摘录：

if ( $('#newpassword1').val() != $('#newpassword2').val() ) {
    errorMessage = "The new passwords you've entered don't match.";

    $('#newpassword1, #newpassword2').setCustomValidity(errorMessage);
}

从直觉上看，这似乎应该可行，但当然不行。错误很简单TypeError: $(...).setCustomValidity is not a function.

请注意：我不是问如何在字段中添加红色环或其他任何内容，我希望它实际上be无效（例如，有其validity.valid财产返还false).

是否有可能做到这一点？

Thanks!

尝试下面的代码。您收到该错误是因为 jQuery 返回选定对象的数组，并且因为setCustomValidity由本机输入元素而不是 jquery 对象支持，您会看到该错误。

$('#newpassword1, #newpassword2').each(function() {
    this.setCustomValidity(errorMessage)
});