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

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

考虑以下几点：

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

如果存在规范提交按钮(即错误,则用户代理将停止向用户提交并显示UI：" 但是,如果不是使用提交输入,the user is clicking an anchor that executes 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),则不会触发UI显示.

现在我们有问题.提交

>< input type =“submit”>作品(暂停和显示UI)
>< button type =“submit> works(halts and shows UI)
> form.submit不工作(不停止;不显示UI)
> form.checkValidity()不起作用(不显示UI)

How to programmatically display HTML5 client-side form validation error bubbles?

jsFiddle for all of the above

也可以看看

> How to programmatically display HTML5 client-side validation error bubbles?
> Trigger standard HTML5 validation (form) without using submit button?
> Triggering HTML5 Form Validation

解决方法

这可能不是最干净的方式,但是我添加了一个隐藏的提交按钮,并以编程方式触发它上的点击​​事件.