【问题标题】：How to programmatically display HTML5 client-side form validation error bubbles?如何以编程方式显示 HTML5 客户端表单验证错误气泡？
【发布时间】：2013-09-23 19:54:26
【问题描述】：

我正在尝试使用 HTML5 客户端验证（即在表单内），但看不到如何以编程方式显示验证错误气泡。

考虑以下几点：

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

如果存在规范的submit 按钮（即<input type="submit">），并且存在验证错误，用户代理将停止提交并向用户显示 UI：

但是，如果不是使用submit 输入，而是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> 工作（暂停并显示 UI）
form.submit 不起作用（不停止；不显示 UI）
form.checkValidity() 不起作用（不显示 UI）

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

jsFiddle for all of the above

另见

【问题讨论】：

标签： html validation

【解决方案1】：

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

【讨论】：

【解决方案2】：

我以这种方式更新了the jsfiddle：

添加一个带有 css 类的新提交按钮#fakeButton：

.fakeButton{
    display:none;
}

添加一个通过 javascript 函数触发它的新链接：

function DoFakeButtonClick()
{
    var button = $('#fakeButton');
    if (button === null) 
       return;

    button.click();
}

效果很好，我认为这是目前以编程方式执行此操作的唯一方法

【讨论】：