Javascript Safari在调用reportValidity时未显示验证消息

我正在使用按钮单击（而不是表单提交）验证表单。按钮在窗体内。下面是代码

HTML

<form id="form">
 <input type="text" name="name" id="name" required />
 <Button id="validate-button" onclick="check()">Validate</Button>
</form>

虽然这在chrome中正常工作，表单经过验证，我可以在名称输入字段中看到一个弹出窗口，并显示消息：

请填写此字段。

然而，在safari中，情况并非如此。我可以看到无效输入得到了关注，但safari浏览器中缺少验证popover消息

JSFiddle:

---

注意：请检查safari上面的jsfiddle链接

结果发现问题是因为按钮上缺少

类型

属性。添加

type=“button”

后，验证消息开始显示在safari中

工作区：

---

注意：在safari中查看上面的链接

这不仅仅是safari，它也是。“缺少值默认值和无效值默认值是提交按钮状态。”是的，如果捕获点击事件并阻止其传播，chrome将正确显示验证弹出窗口，它不关心按钮是否为什么类型。但是safari很在意，没有显示出来问题是对

reportValidity（）

的调用会覆盖浏览器中的调用。这仍然可能被称为bug，但是如果不阻止表单的提交，您不需要自己称之为bug+我同意，实际上我的表单中已经有一个类型为submit的按钮，我还需要一个类型为submit的按钮，但这是不允许的，所以我用click handler创建了一个普通按钮，我正在停止处理程序中的传播。问题仍然存在，只有通过添加类型属性和值才能解决button@Kaiido在问题中添加了JSFIDLE。请在fiddle中签入您没有停止事件的传播，并且需要通过preventDefault（）停止的是默认行为

function check(e){
    document.getElementById('form').reportValidity();
}