如何以编程方式显示HTML5客户端表单验证错误气泡？

Question

我正在尝试使用HTML5客户端验证(即在表单内),但无法看到如何以编程方式显示验证错误气泡.

考虑以下:

<form id="myForm">
    <input type="text" id="number" min="1" max="10" step="3" required>
</form>

如果存在规范submit按钮(即<input type="submit">),并且存在验证错误,则用户代理将暂停提交并向用户显示UI:

但是,如果用户不是使用submit输入,而是单击执行javascript的锚点(即ASP.net Webforms):

<a href='javascript:SaveChanges()'>Save Quantity</a>

<script>
   function SaveChanges()
   {
      var form = document.getElementById('myForm');
      if (form === null) return;

      if (!form.checkValidity())
      {
         //We reach here, but no UI is displayed
         return;
      }
      form.submit();       
</script>

问题在于

form.checkValidity();

不检查表格的有效性(返回false,如果它是无效的),它不会触发用户界面显示.

现在我们有了问题.提交通过

• <input type="submit"> 工作(停止并显示UI)
• <button type="submit> 工作(停止并显示UI)
• form.submit 不起作用(不停止;不显示UI)
• form.checkValidity() 不起作用(不显示UI)

如何以编程方式显示HTML5客户端表单验证错误气泡？

jsFiddle以上所有

也可以看看

• 如何以编程方式显示HTML5客户端验证错误气泡？
• 触发标准HTML5验证(表单)而不使用提交按钮？
• 触发HTML5表单验证

Answer 1

这可能不是最干净的方法，但我添加了一个隐藏的提交按钮并以编程方式触发其上的单击事件。