如何更改表单有效性检查后显示的默认工具提示，直到错误修复为止？

Question

填写表格并单击“提交”后，第一个有错误的字段会出现工具提示“值未填写！”。

焦点改变或页面滚动到某处后它会自动消失，并且不会再次出现，除非再次按“提交”。

我想知道是否有任何方法可以阻止此工具提示执行任何操作，除非用户最终修复了字段中的值，例如开始在其中输入内容。

到目前为止，我发现的唯一的事情是控制“oninvalid”事件中工具提示的文本：

<form action="" method="get">
    <input type="text" name="name" required oninvalid="this.setCustomValidity('Wow!')" />
    <input type="submit" value="Submit!" />
</form>

我还可以在“oninput”事件上应用相同的方法来更改文本。当用户输入内容时，文本不会消失，但这不是我想要的......

主要问题是如何保持工具提示一旦出现就不会消失，直到您开始在其中输入文本。

Answer 1

您走在正确的轨道上，提到了

invalid

和

input

事件。但您无法控制错误消息，因此它保持可见。您只能更改显示的文本。您需要创建自己的 DOM 元素，然后显示它。

当无效事件被触发时，您可以停止默认行为（显示错误消息），并且像本例一样，更改输入的类名，以便显示

.invalidmessage

。请注意，我在

addEventListener() 方法

上使用了

e.preventDefault()

和 useCapture 参数（设置为 true）。

当用户在表单字段中写入内容时，会触发

input

事件。这可用于测试输入值是否有效，如果有效，则再次从输入元素中删除类名。

document.forms.form01.addEventListener('invalid', e => {
  e.preventDefault();
  e.target.classList.add('invalid');
}, true);

document.forms.form01.addEventListener('input', e => {
  if (e.target.validity.valid) {
    e.target.classList.remove('invalid');
  }
});

.invalidmessage {
  visibility: hidden;
}

input.invalid~.invalidmessage {
  visibility: visible;
}

<form name="form01" action="" method="get">
  <input type="text" name="name" required />
  <input type="submit" value="Submit!" />
  <div class="invalidmessage">Wow!</div>
</form>