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

Question

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

<input type="number">

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

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

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

Answer 1

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

浏览器必须支持HTML5验证才能看到这些弹出式窗口，Chrome浏览器的弹出式窗口与Firefox等有所不同。使用HTML5验证配置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标签是平淡的，但那是＆＃34;空白画布＆＃34;它允许设计灵活性和跨浏览器的一致性和可靠性。见下文。

---

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

<强>引用：

  

＆＃34;是否有一种简单的方法可以让我的自定义错误消息以相同的方式显示？＆＃34;

这取决于你是否认为添加另一个jQuery插件很简单。您可以将jQuery插件（如qTip2或ToolTipster）集成到jQuery Validate中。这些插件有许多选项，主题和CSS，您可以自定义这些选项。这可能很棘手，因为每个插件根据其工作方式，操作方法，回调等进行不同的集成。

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

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

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

Answer 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

希望它能回答你的问题

Answer 3

那个＆＃39;标注＆＃39;正如你所说，它实际上是解释规范的方式，错误信息在某些浏览器中看起来会有所不同或根本没有弹出

盯着IE