你能用JavaScript触发自定义HTML5表单错误吗？

Question

如果我有一个输入<input type="text">,我想在输入上触发原生错误,你能做到吗？喜欢(虚拟代码)ele.triggerError('Error Message');

它看起来像:

但是有一个自定义消息和它自己的验证功能.例如,需要AJAX验证.

Answer 1

触发本机错误的唯一方法是提交表单.虽然您可以设置自定义消息 setCustomValidity(如我在此处的回答中所述)并且您可以使用触发invalid事件checkValidity,但这仅为您提供了创建自己的验证UI的钩子. 这是一个可以用来验证的简单示例.

请注意,如果您使用submit()将绕过验证API 的方法提交表单.但是如果你触发了click提交按钮的事件,它将在Firefox和Opera中运行,而不是Chrome.我现在就避免这样做.

@JasonWilliams为什么它需要看起来一致的跨浏览器,除了你自己以外有多少用户在多个浏览器中访问？更重要的是,这些东西看起来与跨浏览器或跨平台的跨站点一致. (3认同)
@robertc,老实说你不知道？首先,我们在没有Ajax(标准表单提交)的情况下使用Ajax具有相同的错误UI状态会很好.其次,更多的自定义选项和网站管理员自行决定留下UI决定会更有意义.就像我们可以自定义提交按钮一样,为什么我们不能自定义错误气泡？为了争论,为什么stackoverflow的设计师选择将"添加注释"按钮设置为在所有浏览器上看起来相同,因为每个浏览器都有自己的**默认样式**用于按钮？ (3认同)
@JasonWilliams HTML没有CSS选择器; 但是,这是我的论点.我不知道浏览器的计划是什么,或者为什么你选择了我的(正确)答案的评论来表达你对此事的看法.如果你想游说浏览器或规格来添加功能,那么[创建一个bug](https://bugzilla.mozilla.org/)或[订阅邮件列表](http://lists.w3.org/Archives /公共/ WWW式/). (2认同)

Answer 2

现在HTMLFormElement.reportValidity()，您可以使用该方法，该方法目前已在Chrome，Firefox，Opera和Android浏览器中实现，但在Internet Explorer中不支持（请访问caniuse.com查看支持的浏览器）。

@reiallenramos 或 jQuery 语法 $('form').reportValidity(); (2认同)
即使在没有表单元素的输入元素上它似乎也可以工作：`document.getElementById('field2').reportValidity();`。我只是在 Chromium 中测试了它。 (2认同)