javascript - 如何使用您自己的自定义验证消息摆脱 HTML5 验证消息

Question

我正在尝试使用在字段附近显示为工具提示文本的自定义消息来验证 HTML 5 中表单的必填 字段。以下是我为此目的尝试的 HTML 代码:

<form method="post" action="" id="validation">
  Name:<input type="text" id="nome"  name="nome" required="required" oninvalid="this.setCustomValidity('Name is required field')" oninput="setCustomValidity('')" /><br />
  <br />
  <br />
  <input type="submit" value="Enviar" />
</form>

以上代码在 google chrome 中运行良好，但在以下情况下在 mozilla 中除外:

• 按下提交按钮，它会给出验证消息“Name is必填字段”

• 填写一些内容，然后在按提交之前输入退格键键盘完全删除名称。当它被完全删除时，它会显示消息“请填写此字段”本身。而它应该再次显示一条消息“姓名是必填字段”或不显示任何内容。

有人可以测试并提供一种替代解决方案来在 Mozilla 中执行此操作吗？

Answer 1

您可以向表单元素添加“novalidate”属性来禁用 html5 内置验证，然后通过 javascript 自行处理所有验证。