javascript - HTML5/JS/jQuery : On invalid input, 将不同的(任意)元素标记为无效

Question

我正在尝试创建一种标准的新密码表单，您可以在其中输入一次新密码，然后再输入一次以进行确认。我希望这样，一旦您模糊了这些字段，如果它们不匹配，两者 将被标记为无效，如以下场景所示:

1. 用户在 #newpassword1 中输入密码 abc。
2. #newpassword2 的用户标签。
3. 用户在 #newpassword2 中输入密码 def。
4. 用户离开标签。
5. 验证检测到不匹配，并将 #newpassword1 和 #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。

请注意:我不是在问如何向字段添加红色圆环或其他内容，我希望它实际上无效(例如，让它的validity.valid 属性返回 false)。

这有可能吗？

谢谢!

Answer 1

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

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