如何以编程方式显示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输入，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">有效（停止并显示用户界面）
• <button type="submit>有效（停止并显示用户界面）
• form.submit不起作用（不停止;不显示用户界面）
• form.checkValidity()不起作用（不显示用户界面）

  

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

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

Answer 1

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

Answer 2

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

使用css类添加新的提交按钮#fakeButton：

.fakeButton{
    display:none;
}

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

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

    button.click();
}

它工作得很好，我认为它是目前以编程方式执行此操作的唯一方法