javascript - 是否有HTML5验证API来将元素的状态设置为无效？

Question

我不想使用HTML5验证API，但有一点。我将使用JavaScript进行自定义验证，但我想使用浏览器用来显示验证消息的工具提示（如thingy）。
因此，简而言之，我希望在自己的事件处理程序中有选择地使用element.setCustomValidity("my own message")，这样就可以避免使用第三方工具提示。
然而，即使我设置了自定义有效性，它也不会显示，直到我以某种方式使控件的状态失效。
如果我调用验证API（element.checkValidity()），它将开始执行自己的内置验证，查找HTML元素上的属性。但我不想要这些。

function submitEventHandler() {
  let errors = myOwnValidateFunction();

  if (errors && errors.length > 0) {
     let txt = document.getElementById("txt");
     txt.setCustomValidity("No, no, no, no, you're doing it wrong!");

    // Is there a way to invalidate an HTML element?
    // ...???

  }
}

Answer 1

嗯，和往常一样，每个浏览器在几乎所有新的API上的行为都是不同的。
要使输入无效，只需设置此项即可：input.setCustomValidity('just an error');，这将使浏览器知道此输入有问题。
但是，每个浏览器都会做自己的事情：
Chrome-在您尝试提交表单之前不会显示任何错误，只是它会让用户知道第一个有错误的字段有错误，它会忽略其余有错误的输入。
Firefox-将显示您的自定义消息并在设置后立即用红色突出显示输入，您不需要等待提交来显示错误，当单击提交时，它会在无效输入上显示不同的工具提示。
边缘-只有当用户悬停在工具提示上时，才会显示带有自定义消息的工具提示，并在提交后用不同的工具提示以红色突出显示
没有在其他浏览器上测试，但我相信每个浏览器都会使用自己的方式来显示错误，有些可能等待提交，有些会立即显示，但是在您input.setCustomValidity('Some error message')之后，所有支持此API的人都应该使输入无效
这就是为什么您可能会考虑显示自己的工具提示，以避免这种浏览器依赖性，并确保其在所有这些方面的工作方式相同。
https://jsfiddle.net/q60bwteL/17/
更新
您不需要设置任何类型，上面的验证对type='text'也同样有效，我不确定您看到了什么，但是下面的代码片段有两个输入，一个没有类型，一个有type='text'，都有效。
你可以为你的问题创建一个小提琴，这样我可以看一下，但是正如你从小提琴上看到的，它对所有类型的输入都有效：
https://jsfiddle.net/q60bwteL/21/
但请再次注意，它在不同浏览器上的工作方式有所不同，chrome只显示第一个出现错误的字段，而不是所有的字段，而且只在提交时显示，而firefox则显示所有字段的错误（如果有多个错误），然后单击提交。
这就是为什么我个人从来不相信浏览器的实现有我自己可以做的事情，实现一个基本的错误处理的事情是非常容易的，从你已经有了它的问题，你只需要添加样式和工具提示到它，有很多方法来创建一个工具提示与CSS单独在网上（例如：https://stackoverflow.com/a/25391104/8727608）。
创建一个函数来处理错误：

function setError(inputElement, errorMessage) {
  inputElement.setAttribute('title', 'errorMessage');
  inputElement.classList.add('errorInput') 
}

创建一个将删除所有错误内容的函数：

function removeError(inputElement) {
  inputElement.removeAttribute('title');
  inputElement.classList.remove('errorInput') 
}

使用CSS设置errorInput类的样式。
现在我假设您只返回带有错误消息的字符串数组中的错误，但是您可以使用每个对象都包含错误消息的对象数组和具有错误的输入元素：

if (errors && errors.length > 0) {
  for(var i = 0; i<errors.length; i++) {        
    setError(errors[i].element, errors[i].message);
  }
}

在验证输入之前，只需调用removeError函数，如果有错误，提交时不要忘记返回false。（就像你已经做的那样）
更新2
我不知道为什么我没有想到。但有一种方法可以停止验证并在需要时启动它：
在表单上添加novalidate属性将让浏览器知道您不想对该表单执行验证，因此这不会显示任何错误，并将按您喜欢的方式处理提交。
但您仍然需要使用该验证，为此，您可以调用表单元素上的reportValidity()，基本上，该函数在提交时启用验证，无论您在哪里调用它，它都会在单击提交时运行验证，但这将只显示第一个输入，并显示错误消息，而不是所有输入（即使在firefox上），看起来验证有两种状态，提交前和提交后，不确定原因，但是这是两种不同的检查，您只能控制提交后检查，而不能控制提交前检查。
检查这个小提琴：https://jsfiddle.net/q60bwteL/64/
所以你可以控制什么时候进行验证，但是有两种类型的验证，在提交之前和之后，你只能在提交之后进行控制，并且它只显示第一个输入错误，而不是所有的错误。
我们喜欢吗？不，为什么会这样？我不知道，老实说，看起来firefox开发人员只是在发现第一个错误后就中断了循环。
P.S-经过考虑，他们只实现了title属性工具提示方法，但是由于只有一个元素可以悬停或聚焦，所以他们只能显示一条错误消息，这就是工具提示的工作原理。