javascript - jQuery 验证 - 如何显示错误时的默认标注？

Question

如果我创建一个像这样的输入控件:

<input type="number">

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

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

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

Answer 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 标签很平淡，但这是“空白 Canvas ”，它允许设计灵 active 以及跨浏览器的一致性和可靠性。见下文。

<小时/>

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

引用:

"Is there a simple way to make my custom error messages show up in the same way?"

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

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

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

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