Skip to content
This repository was archived by the owner on Feb 12, 2022. It is now read-only.

Commit c8bf0bf

Browse files
author
Christopher McCulloh
authored
Merge pull request #1959 from swilliamset/w3847298-support-validation
add validation support to templates
2 parents d7c3ac8 + 7b267a8 commit c8bf0bf

File tree

17 files changed

+52
-35
lines changed

17 files changed

+52
-35
lines changed

‎index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@
5858
<h2>Checkboxes</h2>
5959
<div class="thin-box">
6060
<section id="checkboxes-block">
61-
61+
<div id="myCheckbox1Wrapper" style="width: 300px;"></div>
6262
<div class="checkbox" id="myCheckbox">
6363
<label class="checkbox-custom" data-initialize="checkbox" id="myCustomCheckbox1">
6464
<input class="sr-only" type="checkbox" value="" />

‎index.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,10 @@ define(function (require) {
3030
CHECKBOX
3131
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
3232

33+
var checkbox = require('hbs!fuelux_templates/checkbox');
34+
var $myCheckbox1Wrapper = $('#myCheckbox1Wrapper');
35+
$myCheckbox1Wrapper.html(checkbox({ id: 'myCheckbox1', required: true, validation: 'error', label: 'Checkboxes', checkboxes: [{label: 'Checkbox Label 1' }, {label: 'Checkbox Label 2' }]}));
36+
3337
// sample method buttons
3438
$('#btnCheckboxToggle').on('click', function () {
3539
$('#myCustomCheckbox1').checkbox('toggle');

‎less/forms.less

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
.checkbox-radio-hover();
3737
}
3838
}
39-
39+
4040
label, .input-label, label& {
4141
cursor: pointer;
4242
font-weight: normal;
@@ -102,7 +102,7 @@
102102
color: @text-color;
103103
color: @checkbox-primary-color;
104104
cursor: pointer;
105-
105+
106106
&:before {
107107
.checkbox-radio-focus();
108108
outline: none;
@@ -176,12 +176,12 @@
176176

177177

178178

179-
// Allows multiline labels next to checkboxes and radio
179+
// Allows multiline labels next to checkboxes and radio
180180
// Should be wrapped in `<form class="form-horizontal"><div class="form-group">`
181181
.fuelux {
182182

183183
.checkbox.multiline, .radio.multiline {
184-
float: left;
184+
float: left;
185185
margin-left: 15px;
186186
}
187187

@@ -191,9 +191,9 @@
191191
.fuelux {
192192

193193
.checkbox.multiline ~ .control-label, .radio.multiline ~ .control-label {
194-
float: left;
195-
width: 80%;
196-
margin-left: 10px;
194+
float: left;
195+
width: 80%;
196+
margin-left: 10px;
197197
text-align: left;
198198

199199
& > label {
@@ -204,3 +204,16 @@
204204

205205
}
206206

207+
.fuelux {
208+
.form-group {
209+
&.required {
210+
.control-label {
211+
&:before {
212+
content: '*';
213+
color: @text-danger;
214+
margin-right: @margin-xs;
215+
}
216+
}
217+
}
218+
}
219+
}

‎templates/handlebars/bootstrap/input.hbs

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="form-group{{#if horizontal}}{{#if inputsize}} form-group-{{inputsize}}{{/if}}{{/if}}{{#if validation}} has-{{validation}}{{#if feedback}} has-feedback{{/if}}{{/if}}">
1+
<div class="form-group{{#if horizontal}}{{#if inputsize}} form-group-{{inputsize}}{{/if}}{{/if}}{{#if validation}} has-{{validation}}{{#if feedback}} has-feedback{{/if}}{{/if}}{{#if required}} required{{/if}}">
22
{{#if label}}<label for="{{#if id}}{{id}}{{else}}myInput{{/if}}" class="control-label{{#if horizontal}} col-sm-2{{/if}}">{{label}}</label>{{/if}}
33
{{#if horizontal}}<div class="col-sm-10">{{/if}}
44
{{#if hasAside}}<div class="input-group">{{/if}}
@@ -29,4 +29,4 @@
2929
{{#if feedback}}<span class="glyphicon glyphicon-{{feedback}} form-control-feedback" aria-hidden="true"></span><span id="{{#if id}}{{id}}{{else}}myInput{{/if}}Status" class="sr-only">({{#if validation}}{{validation}}{{/if}})</span>{{/if}}
3030
{{#if helptext}}<p class="help-block">{{helptext}}</p>{{/if}}
3131
{{#if horizontal}}</div>{{/if}}
32-
</div>
32+
</div>

‎templates/handlebars/bootstrap/textarea.hbs

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
<div class="form-group{{#if validation}} has-{{validation}}{{/if}}">
1+
<div class="form-group{{#if validation}} has-{{validation}}{{/if}}{{#if required}} required{{/if}}">
22
<label class="control-label{{#if horizontal}} col-sm-2{{/if}}" for="{{#if id}}{{id}}{{else}}myTextarea{{/if}}">{{#if label}}{{label}}{{/if}}</label>
33
{{#if horizontal}}<div class="col-sm-10">{{/if}}
44
<textarea class="form-control" id="{{#if id}}{{id}}{{else}}myTextarea{{/if}}" name="{{#if name}}{{name}}{{else}}{{#if id}}{{id}}{{else}}myTextarea{{/if}}{{/if}}" rows="{{#if rows}}{{rows}}{{/if}}"{{#if required}} required{{/if}}{{#if readonly}} readonly{{/if}}{{#if disabled}} disabled{{/if}}>{{#if text}}{{text}}{{/if}}</textarea>
55
{{#if helptext}}<p class="help-block">{{helptext}}</p>{{/if}}
66
{{#if horizontal}}</div>{{/if}}
7-
</div>
7+
</div>

‎templates/handlebars/fuelux/checkbox.hbs

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="form-group{{#if validation}} has-{{validation}}{{/if}}">
1+
<div class="form-group{{#if validation}} has-{{validation}}{{/if}}{{#if required}} required{{/if}}">
22
<label for="{{#if id}}{{id}}{{else}}myCustomCheckboxWrapper{{/if}}" class="control-label{{#if horizontal}} col-sm-2{{/if}}">{{#if label}}{{label}}{{/if}}</label>
33

44
<div class="{{#if inline}}checkbox{{/if}}{{#if horizontal}} col-sm-10{{/if}}"{{#if required}} required{{/if}}>
@@ -12,4 +12,4 @@
1212
{{/each}}
1313
{{#if helptext}}<p class="help-block">{{helptext}}</p>{{/if}}
1414
</div>
15-
</div>
15+
</div>

‎templates/handlebars/fuelux/combobox.hbs

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="form-group{{#if horizontal}}{{#if inputsize}} form-group-{{inputsize}}{{/if}}{{/if}}{{#if validation}} has-{{validation}}{{#if feedback}} has-feedback{{/if}}{{/if}}">
1+
<div class="form-group{{#if horizontal}}{{#if inputsize}} form-group-{{inputsize}}{{/if}}{{/if}}{{#if validation}} has-{{validation}}{{#if feedback}} has-feedback{{/if}}{{/if}}{{#if required}} required{{/if}}">
22
<label for="{{#if id}}{{id}}{{else}}myCombobox{{/if}}Input" class="control-label{{#if horizontal}} col-sm-2{{/if}}">{{#if label}}{{label}}{{/if}}</label>
33

44
{{#if horizontal}}<div class="col-sm-10">{{/if}}
@@ -17,4 +17,4 @@
1717
{{#if feedback}}<span class="glyphicon glyphicon-{{feedback}} form-control-feedback" aria-hidden="true"></span><span id="{{#if id}}{{id}}{{else}}myCombobox{{/if}}Status" class="sr-only">({{#if validation}}{{validation}}{{/if}})</span>{{/if}}
1818
{{#if helptext}}<p class="help-block">{{helptext}}</p>{{/if}}
1919
{{#if horizontal}}</div>{{/if}}
20-
</div>
20+
</div>

‎templates/handlebars/fuelux/radio.hbs

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="form-group{{#if validation}} has-{{validation}}{{/if}}">
1+
<div class="form-group{{#if validation}} has-{{validation}}{{/if}}{{#if required}} required{{/if}}">
22
<label for="{{#if id}}{{id}}{{else}}myCustomRadioWrapper{{/if}}" class="control-label{{#if horizontal}} col-sm-2{{/if}}">{{#if label}}{{label}}{{/if}}</label>
33

44
<div class="{{#if inline}}radio{{/if}}{{#if horizontal}} col-sm-10{{/if}}"{{#if required}} required{{/if}}>
@@ -12,4 +12,4 @@
1212
{{/each}}
1313
{{#if helptext}}<p class="help-block">{{helptext}}</p>{{/if}}
1414
</div>
15-
</div>
15+
</div>

‎templates/handlebars/fuelux/selectlist.hbs

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="form-group{{#if validation}} has-{{validation}}{{/if}}">
1+
<div class="form-group{{#if validation}} has-{{validation}}{{/if}}{{#if required}} required{{/if}}">
22
<label class="control-label{{#if horizontal}} col-sm-2{{/if}}" for="{{#if id}}{{id}}{{else}}mySelectlist{{/if}}">{{#if label}}{{label}}{{/if}}</label>
33
<div class="controls text-{{#if buttonalign}}{{buttonalign}}{{else}}left{{/if}}{{#if horizontal}} col-sm-10{{/if}}">
44
<div class="btn-group selectlist"{{#unless doNotInit}} data-initialize="selectlist"{{/unless}} data-resize="auto" id="{{#if id}}{{id}}{{else}}mySelectlist{{/if}}">
@@ -16,4 +16,4 @@
1616
</div>
1717
{{#if helptext}}<p class="help-block">{{helptext}}</p>{{/if}}
1818
</div>
19-
</div>
19+
</div>

‎templates/handlebars/fuelux/spinbox.hbs

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="form-group{{#if validation}} has-{{validation}}{{#if feedback}} has-feedback{{/if}}{{/if}}">
1+
<div class="form-group{{#if validation}} has-{{validation}}{{#if feedback}} has-feedback{{/if}}{{/if}}{{#if required}} required{{/if}}">
22
<label class="control-label{{#if horizontal}} col-sm-2{{/if}}" for="{{#if id}}{{id}}{{else}}mySpinbox{{/if}}Input">{{#if label}}{{label}}{{/if}}</label>
33
<div{{#if horizontal}} class="col-sm-10"{{/if}}>
44
<div class="spinbox" {{#unless doNotInit}}data-initialize="spinbox"{{/unless}} id="{{#if id}}{{id}}{{else}}mySpinbox{{/if}}">
@@ -15,4 +15,4 @@
1515
</div>
1616
{{#if helptext}}<p class="help-block">{{helptext}}</p>{{/if}}
1717
</div>
18-
</div>
18+
</div>

0 commit comments

Comments
 (0)