Как вызвать всплывающее окно с ошибкой проверки 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 в моем всплывающем окне ошибки (которое не появляется). Как сделать всплывающее окно с ошибкой проверки интерфейса? Для справки всплывающее окно, на которое я ссылаюсь, можно увидеть в следующем коде:

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

Answer 2

Вы можете указать ниже код для настройки сообщения проверки по умолчанию, но у меня есть пожертвование для обязательной проверки не для других, если вы хотите сделать для другой проверки также, пожалуйста, настройте больше

Код формы

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