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

我不想使用HTML5验证API，但有一件事。我将使用JavaScript进行自定义验证，但我希望使用浏览器用来显示验证消息的漂亮工具提示

因此，简而言之，我希望在我自己的事件处理程序中有选择地使用

元素.setCustomValidity（“我自己的消息”）

，这样我就可以避免使用第三方工具提示

然而，即使我设置了自定义有效性，它也不会显示，直到我以某种方式使控件的状态无效

如果我调用验证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?
    // ...???

  }
}

---

和往常一样，每个浏览器在几乎所有新API上的行为都不同

要使输入无效，只需设置以下内容：

input.setCustomValidity（'只是一个错误'），这将让浏览器知道此输入有问题

但是每个浏览器都有自己的功能：

Chrome-在您尝试提交表单之前不会显示任何错误，只会让用户知道出现错误的第一个字段有错误，它会忽略出现错误的其余输入

Firefox-设置后，将立即显示自定义消息并以红色突出显示输入，您无需等待提交来显示错误，单击提交时，将在无效输入上显示不同的工具提示

Edge-仅当用户将鼠标悬停在工具提示上方时，才会显示带有自定义消息的工具提示，并在提交后以红色突出显示不同的工具提示

没有在其他浏览器上测试它，但我相信每个浏览器都会使用自己的方式显示错误，有些可能会等待提交，有些会立即显示，但是所有支持此API的人都应该在您
input.setCustomValidity（“某些错误消息”）之后使输入无效。

这就是为什么你可以考虑显示自己的工具提示来避免这种浏览器依赖性，并确保其在所有的工作中都是相同的方式。

更新

您不需要设置任何类型，并且上面的验证对
type='text'
的工作方式相同，我不确定您看到了什么，但是下面的代码段有两个输入，一个没有类型，一个有
type='text'
，两者都可以工作

您可以创建一个小提琴来处理您的问题，这样我就可以看一看，但正如您从小提琴中看到的，它适用于所有类型的输入：

但是，请再次注意，它在不同浏览器上的工作方式不同，chrome仅显示第一个有错误的字段，而不是所有字段，并且仅在提交时显示，而firefox则在单击提交之前显示所有字段的错误（如果有多个错误）

这就是为什么我个人从来不相信浏览器的实现，我可以自己做一些事情，实现一个基本的错误处理功能非常容易，从你已经有的问题来看，你只需要添加样式和工具提示，有很多方法可以在web上单独使用CSS创建工具提示（例如：）

创建一个函数来处理错误：

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

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

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

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);
  }
}

if（errors&&errors.length>0）{
对于（var i=0；我是否使用
submitEventHandler
来处理表单中的
onsubmit
事件？能否尝试从表单中返回
false
？@KrzysztofAtłasik是的，我已经在这么做了（和/或
event.preventDefault（）
）。但这只是为了阻止表单发布。这与验证API无关。：-）如果我没有弄错，错误工具提示与title属性相同，为什么不设置title属性以包含输入上的消息（如果您只需要该工具提示）@Art3mix这正是我想要避免的另一件事。与验证API相比，这也是一项艰巨的工作。如果我知道一种在一个函数调用中将我选择的控件标记为无效的方法，那就可以了。问题是：您正在设置HTML5验证属性（
type=email | url
）在您的示例中。正如我的问题中所述，我不想使用任何HTML 5验证；我想用JavaScript进行我自己的验证。我只想使用验证API的可视部分，即控件包含无效输入时出现的内容，因此我不必在创建工具提示或使用第三方控件上投入所有精力s、 感谢您在这个答案上投入了大量精力。再次感谢您的投资。我对此表示感谢。不过，我的问题仍然存在。例如，当您注意到只有第一个字段显示工具提示时，验证API存在许多问题。还有一个问题是，验证API是lso在每次加载页面时都会使控件无效。非自愿验证，即您和我作为开发人员无法控制何时进行验证，是问题的症结所在——如果它公开了触发和抑制控件验证的方法，所有这些都会到位。PS：我知道如何创建工具提示，也知道如何使用第三方问题是要避免做这两件事：-）我知道你做了，我只是给了其他开发人员一个快速的方法，让他们来研究这个问题。你是对的，这是这么多浏览器的问题，你不能依赖任何实现，所以最后最好的方法是自己做，浏览器似乎忘记了开发人员必须开发for a