如何使用我们自己的自定义验证消息摆脱HTML 5验证消息

Question

我正在尝试使用自定义消息验证HTML 5中的required表单字段，这些消息显示为字段附近的工具提示文本。 以下是我为此目的尝试的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>

以上代码在谷歌浏览器中工作正常，除了在以下情况下的mozilla：

• 按提交按钮，它会给出验证消息＆＃34;名称是 必填字段＆＃34;

• 填充内容然后再按提交类型退格键 键盘完全擦除名称。当它被完全删除时，它会显示消息 ＆＃34;请填写此字段＆＃34;它自己应该再次显示一条消息＆＃34;名字是 必填字段＆＃34;或者什么都不显示。

可以在Mozilla中进行一些测试并提供替代解决方案。

Answer 1

您可以添加＆＃34; novalidate＆＃34;属性为form元素以禁用html5内置验证，然后由javascript自己处理所有验证。

Answer 2

如果它只是一个字段，那么你总是可以在oninput上检查该事件：

oninput="if(this.value==''){this.setCustomValidity('Name is required field')} else {this.setCustomValidity('')};"

http://jsfiddle.net/j1c935ex/2/

对于更整洁的代码，您最好调用一个函数，特别是如果您在多个字段中执行此操作。