Bootstrap Validator表单插件:如何更改反馈图标 [英] Bootstrap validator form plugin: how to change feedback icons

问题描述

bootstrap验证器插件有助于验证提供许多出色功能的表单字段.这些功能之一是反馈图标，默认为glyphicon.

The bootstrap validator plugin helps validating the form fields providing a bunch of cool features. One of those features are the feedback icons, which defaults to glyphicon.

假设我要用真棒字体替换glyphicon.

Suppose I want to replace glyphicon with font awesome.

文档说，可以通过传递反馈"来更改它们JSON对象作为数据属性或通过JavaScript.

The documentation says they can be changed by passing a "feedback" JSON object as data attribute or via JavaScript.

通过JavaScript很简单.但是作为数据属性，尚不清楚在何处以及如何精确添加，因为只需添加:

Via JavaScript it's easy. But as data attribute, it is unclear where and how exactly add it, because simply adding:

feedback: {
  success: 'fa-check',
  error: 'fa-times'
}

作为<form>或<div class="form-group">或<input>本身的数据属性，它不起作用.

as data attribute to the <form> or the <div class="form-group"> or the <input> itself it doesn't work.

推荐答案

经过一段时间的努力，我意识到JSON反馈对象应该添加到元素中，并且还需要使用以下语法添加(在文档中未指定):

After some time struggling with it, I realized that the JSON feedback object should be added to the element and also it needs to be added using this syntax (which was not specified in the docs):

<form ... data-feedback='{"success": "fa-check", "error": "fa-times"}'>

请注意引号语法.

此外，如果我们不仅要更改glyphicon，而是将其替换为一种超棒的字体(例如在我的示例中)，则在<div class="form-group">中，我们需要替换:

Also, if we are not just changing the glyphicon but replacing it with a font-awesome one (like in my example), in the <div class="form-group"> we need to replace:

<span class="glyphicon form-control-feedback" aria-hidden="true"></span>

具有:

<span class="fa form-control-feedback" aria-hidden="true"></span>

这篇关于Bootstrap Validator表单插件:如何更改反馈图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！