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

【问题标题】：How do I trigger HTML5 validation error popup when custom validation message is set manually?手动设置自定义验证消息时如何触发 HTML5 验证错误弹出窗口？
【发布时间】：2019-10-17 19:10:19
【问题描述】：

我有以下代码：

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">

如您所见，我可以指出输入字段中发生了错误。但是，我想在我的错误弹出窗口中由setCustomValidity 方法设置的input.validationMessage 中显示消息（不会出现）。如何使 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>

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

【问题讨论】：

标签： javascript html forms validation input

【解决方案1】：

您可以在下面自定义默认验证消息的代码，但我已经完成了必需的验证而不是其他验证，如果您也想进行其他验证，请自定义更多

表单代码

<form action="" method="get">
    <input type="text" name="a" id="a">
    <input type="text" name="b" id="b" required>
    <button type="submit">Submit</button>
</form>

Js 代码

document.addEventListener("DOMContentLoaded", function() {
    var elements = document.getElementsByTagName("input");
    for (var inp of elements) {
        inp.oninvalid = function(e) {
            e.target.setCustomValidity("");
            if (!e.target.validity.valid) {
                e.target.setCustomValidity("Change Validation Message");
            }
        };
        inp.oninput = function(e) {
            e.target.setCustomValidity("");
        };
    }
})

【讨论】：

【解决方案2】：

您可以使用 .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">

【讨论】：