javascript - 可以覆盖验证错误对话框中的文本吗？

Question

我有一个用 HTML 构建的表单，为了让事情简单明了，我有以下内容（以及 3 个其他类似<input>的单选按钮，包装在一个<form>标签中：

<input id="Q1_r1" name="Question_1" required="" type="radio" value="Very Bad"><label class="radio" for="Q1_r1"><span style="padding-left:30px; font-size:13px;">

因此，当您尝试在不选择单选选项的情况下提交此表单时，我们会收到验证错误：

完全预期 - 所以我的问题是，有没有办法将警报框中的“cloud.chfsmail.ky.gov”覆盖为更用户友好的东西？

标签： javascripthtmlvalidation

Answer 1

为了后代的缘故，这里有一个简单的例子，说明如何创建自定义警报弹出窗口来传达某事。给用户（在这种情况下，在填写所有字段之前，表单不会提交）。

关键思想是为您的消息提供一个专用容器，当您想说某事时，您会改变谁的可见性。不要忘记再次隐藏它！

const form = document.querySelector('form');
const overlay = document.getElementById('overlay');

form.onsubmit = (event) => {
  event.preventDefault();
  if ([...form.querySelectorAll('input')].some(i => !i.value)) {
    overlay.textContent = 'All fields need filling out';
    overlay.classList.add('active');
    setTimeout(() => overlay.classList.remove('active'), 3000);
  }
};

#overlay {
  position: absolute;
  top: 50vh;
  right: 50vw;
  background: lightgrey;
  padding: 8px 12px;
  display: none;
}

#overlay.active {
  display: block;
}

<form>
  <label>
    <input name="foo">
    <span>Foo</span>
  </label>
  <label>
    <input name="bar">
    <span>Bar</span>
  </label>
  <label>
    <input name="baz">
    <span>Baz</span>
  </label>
  <button>Submit</button>
</form>
<div id="overlay"></div>