jQuery Validation - 如何显示错误的默认标注？

Posted 2023-05-09

【中文标题】jQuery Validation - 如何显示错误的默认标注？

【英文标题】：jQuery Validation - How to display the default callout on errors?

【发布时间】：2020-10-21 05:39:29

【问题描述】：

如果我创建这样的输入控件：

<input type="number">

并在其中输入字母，将在弹出式控件中显示错误。我看到它被称为标注，但我不确定这是否是正确的名称。它看起来像这样：

但是，如果我在 jQuery Validation Plugin 或 ASP.NET 中定义自己的规则，则不再有花哨的弹出窗口，只是附加了一个标签。它看起来不太好，也与上面的不太一致。

有没有一种简单的方法可以让我的自定义错误消息以相同的方式显示？

【问题讨论】：

您所指的“标注”实际上是 chrome 解释规范的方式，错误消息在某些浏览器中看起来会有所不同或根本不弹出 盯着 IE

有趣，我刚刚在 Firefox 上测试过，你是对的！您介意将其发布为答案吗？

【参考方案1】：

您的图片显示了默认的 html5 验证，该验证仅根据特定的浏览器版本呈现（或不呈现）。

浏览器必须支持 HTML5 验证才能看到这些弹出窗口，并且 Chrome 的弹出窗口看起来与 Firefox 的不同，等等。HTML5 验证是使用您要添加的 HTML5 validation attributes 配置的内联到像这样的每个input元素...

<input type="number" required="required" max="5" ....

---

但是，当您使用the jQuery Validate plugin 时，它会动态地将novalidate 属性添加到<form> 标记中...

<form novalidate="novalidate" id="myform" ....

novalidate 属性用于禁用 HTML5 验证，以便 jQuery Validate 可以接管所有表单验证而不受 HTML5 的干扰。是的，默认的 jQuery Validate 标签是平淡无奇的，但那是允许设计灵活性和跨浏览器一致性和可靠性的“空白画布”。见下文。

---

如果您希望错误消息看起来更像是使用 HTML5 获得的弹出窗口，那么您可以使用 CSS/jQuery 创建自己的。

引用：

“有没有一种简单的方法可以让我的自定义错误消息以相同的方式显示？”

这取决于你是否认为添加另一个 jQuery 插件很简单。您可以将像 qTip2 或 ToolTipster 这样的 jQuery 插件集成到 jQuery Validate 中。这些插件有许多选项、主题和 CSS，您可以无限地自定义它们。这可能会很棘手，因为每个插件的集成方式不同，具体取决于它的工作方式、操作方法、回调等。

这是一个工作演示，展示了 ToolTipster v3（默认 - 无主题）如何轻松集成到 jQuery Validate 中：

http://jsfiddle.net/2DUX2/3/

来源：How to display messages from jQuery Validate plugin inside of Tooltipster tooltips?

【参考方案2】：

这就是您所说的 HTML5 功能，在您的表单元素中使用 required 属性

<input required>

它会显示默认错误消息，但如果你想显示自定义错误消息而不是使用title 属性

<input required title="Custom error message">

查看此网址了解更多信息http://demosthenes.info/blog/848/Create-Custom-HTML5-Form-Error-Messages-with-the-Title-Attribute

希望它能回答你的问题

【讨论】：

如果我在数字文本框中输入字母，就不会出现这种情况。还是谢谢！

查看我添加的链接

再次感谢，感谢您的努力。但这仍然不是我所要求的。我在问如何实现类似弹出（或标注，如果你愿意）的效果，而不是短信。

你可以放一些图片吗

【参考方案3】：

您所指的“标注”实际上是 chrome 解释规范的方式，错误消息在某些浏览器中看起来会有所不同或根本不会弹出

盯着 IE

【讨论】：

我看到一些反对意见的人，请发表评论解释为什么你认为它不好。请记住，这只是标记为正确答案的简化版本