Bootstrap验证器表单插件:如何更改反馈图标

问题描述 投票:1回答:2

bootstrap validator插件有助于验证表单字段,提供一系列很酷的功能。其中一个功能是反馈图标,默认为glyphicon。

假设我想用字体替换glyphicon。

documentation表示可以通过将“反馈”JSON对象作为数据属性或通过JavaScript传递来更改它们。

通过JavaScript它很容易。但作为数据属性,不清楚在何处以及如何准确添加它,因为只需添加:

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

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

forms twitter-bootstrap font-awesome glyphicons formvalidation-plugin
2个回答
4
投票

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

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

请注意引号语法。

另外,如果我们不只是更改glyphicon而是用字体替换它(如我的例子),在<div class="form-group">中我们需要替换:

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

有:

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

0
投票

这没有很好的文档记录,我无法使它工作。我最终使用了一个不同的表单验证器来完成相同的功能,并且使用bootstrap类更容易配置成功/错误格式:

 var validator = $('#submitForm').validate({ 
    validClass: "is-valid",
    errorClass: "is-invalid",

enter image description here

jQuery Validator

© www.soinside.com 2019 - 2024. All rights reserved.