9 * @class Roo.bootstrap.FieldLabel
10 * @extends Roo.bootstrap.Component
11 * Bootstrap FieldLabel class
12 * @cfg {String} html contents of the element
13 * @cfg {String} tag tag of the element default label
14 * @cfg {String} cls class of the element
15 * @cfg {String} target label target
16 * @cfg {Boolean} allowBlank (true|false) target allowBlank default true
17 * @cfg {String} invalidClass DEPRICATED - BS4 uses is-invalid
18 * @cfg {String} validClass DEPRICATED - BS4 uses is-valid
19 * @cfg {String} iconTooltip default "This field is required"
20 * @cfg {String} indicatorpos (left|right) default left
23 * Create a new FieldLabel
24 * @param {Object} config The config object
27 Roo.bootstrap.FieldLabel = function(config){
28 Roo.bootstrap.Element.superclass.constructor.call(this, config);
33 * Fires after the field has been marked as invalid.
34 * @param {Roo.form.FieldLabel} this
35 * @param {String} msg The validation message
40 * Fires after the field has been validated with no errors.
41 * @param {Roo.form.FieldLabel} this
47 Roo.extend(Roo.bootstrap.FieldLabel, Roo.bootstrap.Component, {
54 invalidClass : 'has-warning',
55 validClass : 'has-success',
56 iconTooltip : 'This field is required',
57 indicatorpos : 'left',
59 getAutoCreate : function(){
62 if (!this.allowBlank) {
68 cls : 'roo-bootstrap-field-label ' + this.cls,
73 cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star ' + cls,
74 tooltip : this.iconTooltip
83 if(this.indicatorpos == 'right'){
86 cls : 'roo-bootstrap-field-label ' + this.cls,
95 cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star '+ cls,
96 tooltip : this.iconTooltip
105 initEvents: function()
107 Roo.bootstrap.Element.superclass.initEvents.call(this);
109 this.indicator = this.indicatorEl();
112 this.indicator.removeClass('visible');
113 this.indicator.addClass('invisible');
116 Roo.bootstrap.FieldLabel.register(this);
119 indicatorEl : function()
121 var indicator = this.el.select('i.roo-required-indicator',true).first();
132 * Mark this field as valid
134 markValid : function()
137 this.indicator.removeClass('visible');
138 this.indicator.addClass('invisible');
140 if (Roo.bootstrap.version == 3) {
141 this.el.removeClass(this.invalidClass);
142 this.el.addClass(this.validClass);
144 this.el.removeClass('is-invalid');
145 this.el.addClass('is-valid');
149 this.fireEvent('valid', this);
153 * Mark this field as invalid
154 * @param {String} msg The validation message
156 markInvalid : function(msg)
159 this.indicator.removeClass('invisible');
160 this.indicator.addClass('visible');
162 if (Roo.bootstrap.version == 3) {
163 this.el.removeClass(this.validClass);
164 this.el.addClass(this.invalidClass);
166 this.el.removeClass('is-valid');
167 this.el.addClass('is-invalid');
171 this.fireEvent('invalid', this, msg);
177 Roo.apply(Roo.bootstrap.FieldLabel, {
182 * register a FieldLabel Group
183 * @param {Roo.bootstrap.FieldLabel} the FieldLabel to add
185 register : function(label)
187 if(this.groups.hasOwnProperty(label.target)){
191 this.groups[label.target] = label;
195 * fetch a FieldLabel Group based on the target
196 * @param {string} target
197 * @returns {Roo.bootstrap.FieldLabel} the CheckBox group
199 get: function(target) {
200 if (typeof(this.groups[target]) == 'undefined') {
204 return this.groups[target] ;