15

我正在尝试使用 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如果它无效则返回），它不会触发 UI 显示。

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

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

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

以上所有内容的 jsFiddle

也可以看看

4

2 回答 2

3

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

于 2014-01-17T00:43:02.273 回答
1

我以这种方式更新了jsfiddle：

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

.fakeButton{
    display:none;
}

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

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

    button.click();
}

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

于 2014-03-20T12:58:43.823 回答