手动设置自定义验证消息时如何触发 HTML5 验证错误弹出窗口？

Question

我有以下代码：

document.getElementById('testSubmit').addEventListener('click', (e) => {
  e.preventDefault();
  document.getElementById('test').setCustomValidity('THIS WILL ALWAYS BE AN ERROR, how do I display this message?');
  console.log(document.getElementById('test').validationMessage);
});

<input id = "test" type = "email" required>
<input id = "testSubmit" type = "submit">

正如您所看到的，我可以指出输入字段中发生了错误。但是，我想在我的错误弹出窗口中显示input.validationMessage由方法设置的消息setCustomValidity（未出现）。如何让 UI 验证错误弹出窗口出现。作为参考，我所指的弹出窗口可以在以下代码中看到：

document.getElementById('btn-submit').addEventListener("click", function() {
  if (!document.getElementById('form').checkValidity()) {
    document.getElementById("submit-hidden").click();
  }
});

<form id="form" action="">

  <input type="text" required />
  <input id="submit-hidden" type="submit" style="display: none" />

</form>

<button id="btn-submit">Submit</button>

当您提交但未填写该字段时，会显示弹出窗口“请填写此字段”。如何使用自定义验证消息触发该弹出窗口？

Answer 1

您可以使用 .reportValidity() 来执行此操作。这是一个例子：

document.getElementById('testSubmit').addEventListener('click', (e) => {
  e.preventDefault();
  document.getElementById('test').setCustomValidity('THIS WILL ALWAYS BE AN ERROR, how do I display this message?');
  document.getElementById('test').reportValidity();
});

<input id = "test" type = "email" oninput="validateInput();" required>
<input id = "testSubmit" type = "submit">