Merge pull request #1959 from swilliamset/w3847298-support-validation

add validation support to templates
ExactTarget · Apr 26, 2017 · c8bf0bf · c8bf0bf
2 parents d7c3ac8 + 7b267a8
commit c8bf0bf
Show file tree

Hide file tree

Showing 17 changed files with 52 additions and 35 deletions.
diff --git a/index.html b/index.html
@@ -58,7 +58,7 @@
 				<h2>Checkboxes</h2>
 				<div class="thin-box">
 					<section id="checkboxes-block">
-
+						<div id="myCheckbox1Wrapper" style="width: 300px;"></div>
 						<div class="checkbox" id="myCheckbox">
 							<label class="checkbox-custom" data-initialize="checkbox" id="myCustomCheckbox1">
 								<input class="sr-only" type="checkbox" value="" />

diff --git a/index.js b/index.js
@@ -30,6 +30,10 @@ define(function (require) {
 	 CHECKBOX
 	 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
 
+	var checkbox = require('hbs!fuelux_templates/checkbox');
+	var $myCheckbox1Wrapper = $('#myCheckbox1Wrapper');
+	$myCheckbox1Wrapper.html(checkbox({ id: 'myCheckbox1', required: true, validation: 'error', label: 'Checkboxes', checkboxes: [{label: 'Checkbox Label 1' }, {label: 'Checkbox Label 2' }]}));
+
 	// sample method buttons
 	$('#btnCheckboxToggle').on('click', function () {
 		$('#myCustomCheckbox1').checkbox('toggle');

diff --git a/less/forms.less b/less/forms.less
@@ -36,7 +36,7 @@
 				.checkbox-radio-hover();
 			}
 		}
-		
+
 		label, .input-label, label& {
 			cursor: pointer;
 			font-weight: normal;
@@ -102,7 +102,7 @@
 				color: @text-color;
 				color: @checkbox-primary-color;
 				cursor: pointer;
-				
+
 				&:before {
 					.checkbox-radio-focus();
 					outline: none;
@@ -176,12 +176,12 @@
 
 
 
-// Allows multiline labels next to checkboxes and radio 
+// Allows multiline labels next to checkboxes and radio
 // Should be wrapped in `<form class="form-horizontal"><div class="form-group">`
 .fuelux {
 
 	.checkbox.multiline, .radio.multiline {
-		float: left; 
+		float: left;
 		margin-left: 15px;
 	}
 
@@ -191,9 +191,9 @@
 .fuelux {
 
 	.checkbox.multiline ~ .control-label, .radio.multiline ~ .control-label {
-		float: left; 
-		width: 80%; 
-		margin-left: 10px; 
+		float: left;
+		width: 80%;
+		margin-left: 10px;
 		text-align: left;
 
 		& > label {
@@ -204,3 +204,16 @@
 
 }
 
+.fuelux {
+	.form-group {
+		&.required {
+			.control-label {
+				&:before {
+					content: '*';
+					color: @text-danger;
+					margin-right: @margin-xs;
+				}
+			}
+		}
+	}
+}
diff --git a/templates/handlebars/bootstrap/input.hbs b/templates/handlebars/bootstrap/input.hbs
@@ -1,4 +1,4 @@
-<div class="form-group{{#if horizontal}}{{#if inputsize}} form-group-{{inputsize}}{{/if}}{{/if}}{{#if validation}} has-{{validation}}{{#if feedback}} has-feedback{{/if}}{{/if}}">
+<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}}">
 	{{#if label}}<label for="{{#if id}}{{id}}{{else}}myInput{{/if}}" class="control-label{{#if horizontal}} col-sm-2{{/if}}">{{label}}</label>{{/if}}
 	{{#if horizontal}}<div class="col-sm-10">{{/if}}
 		{{#if hasAside}}<div class="input-group">{{/if}}
@@ -29,4 +29,4 @@
 		{{#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}}
 		{{#if helptext}}<p class="help-block">{{helptext}}</p>{{/if}}
 	{{#if horizontal}}</div>{{/if}}
-</div>
+</div>
diff --git a/templates/handlebars/bootstrap/textarea.hbs b/templates/handlebars/bootstrap/textarea.hbs
@@ -1,7 +1,7 @@
-<div class="form-group{{#if validation}} has-{{validation}}{{/if}}">
+<div class="form-group{{#if validation}} has-{{validation}}{{/if}}{{#if required}} required{{/if}}">
 	<label class="control-label{{#if horizontal}} col-sm-2{{/if}}" for="{{#if id}}{{id}}{{else}}myTextarea{{/if}}">{{#if label}}{{label}}{{/if}}</label>
 	{{#if horizontal}}<div class="col-sm-10">{{/if}}
 		<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>
 		{{#if helptext}}<p class="help-block">{{helptext}}</p>{{/if}}
 	{{#if horizontal}}</div>{{/if}}
-</div>
+</div>
diff --git a/templates/handlebars/fuelux/checkbox.hbs b/templates/handlebars/fuelux/checkbox.hbs
@@ -1,4 +1,4 @@
-<div class="form-group{{#if validation}} has-{{validation}}{{/if}}">
+<div class="form-group{{#if validation}} has-{{validation}}{{/if}}{{#if required}} required{{/if}}">
 	<label for="{{#if id}}{{id}}{{else}}myCustomCheckboxWrapper{{/if}}" class="control-label{{#if horizontal}} col-sm-2{{/if}}">{{#if label}}{{label}}{{/if}}</label>
 
 	<div class="{{#if inline}}checkbox{{/if}}{{#if horizontal}} col-sm-10{{/if}}"{{#if required}} required{{/if}}>
@@ -12,4 +12,4 @@
 		{{/each}}
 		{{#if helptext}}<p class="help-block">{{helptext}}</p>{{/if}}
 	</div>
-</div>
+</div>
diff --git a/templates/handlebars/fuelux/combobox.hbs b/templates/handlebars/fuelux/combobox.hbs
@@ -1,4 +1,4 @@
-<div class="form-group{{#if horizontal}}{{#if inputsize}} form-group-{{inputsize}}{{/if}}{{/if}}{{#if validation}} has-{{validation}}{{#if feedback}} has-feedback{{/if}}{{/if}}">
+<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}}">
 	<label for="{{#if id}}{{id}}{{else}}myCombobox{{/if}}Input" class="control-label{{#if horizontal}} col-sm-2{{/if}}">{{#if label}}{{label}}{{/if}}</label>
 
 	{{#if horizontal}}<div class="col-sm-10">{{/if}}
@@ -17,4 +17,4 @@
 	{{#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}}
 	{{#if helptext}}<p class="help-block">{{helptext}}</p>{{/if}}
 	{{#if horizontal}}</div>{{/if}}
-</div>
+</div>
diff --git a/templates/handlebars/fuelux/radio.hbs b/templates/handlebars/fuelux/radio.hbs
@@ -1,4 +1,4 @@
-<div class="form-group{{#if validation}} has-{{validation}}{{/if}}">
+<div class="form-group{{#if validation}} has-{{validation}}{{/if}}{{#if required}} required{{/if}}">
 	<label for="{{#if id}}{{id}}{{else}}myCustomRadioWrapper{{/if}}" class="control-label{{#if horizontal}} col-sm-2{{/if}}">{{#if label}}{{label}}{{/if}}</label>
 
 	<div class="{{#if inline}}radio{{/if}}{{#if horizontal}} col-sm-10{{/if}}"{{#if required}} required{{/if}}>
@@ -12,4 +12,4 @@
 		{{/each}}
 		{{#if helptext}}<p class="help-block">{{helptext}}</p>{{/if}}
 	</div>
-</div>
+</div>
diff --git a/templates/handlebars/fuelux/selectlist.hbs b/templates/handlebars/fuelux/selectlist.hbs
@@ -1,4 +1,4 @@
-<div class="form-group{{#if validation}} has-{{validation}}{{/if}}">
+<div class="form-group{{#if validation}} has-{{validation}}{{/if}}{{#if required}} required{{/if}}">
 	<label class="control-label{{#if horizontal}} col-sm-2{{/if}}" for="{{#if id}}{{id}}{{else}}mySelectlist{{/if}}">{{#if label}}{{label}}{{/if}}</label>
 	<div class="controls text-{{#if buttonalign}}{{buttonalign}}{{else}}left{{/if}}{{#if horizontal}} col-sm-10{{/if}}">
 		<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 @@
 		</div>
 		{{#if helptext}}<p class="help-block">{{helptext}}</p>{{/if}}
 	</div>
-</div>
+</div>
diff --git a/templates/handlebars/fuelux/spinbox.hbs b/templates/handlebars/fuelux/spinbox.hbs
@@ -1,4 +1,4 @@
-<div class="form-group{{#if validation}} has-{{validation}}{{#if feedback}} has-feedback{{/if}}{{/if}}">
+<div class="form-group{{#if validation}} has-{{validation}}{{#if feedback}} has-feedback{{/if}}{{/if}}{{#if required}} required{{/if}}">
 	<label class="control-label{{#if horizontal}} col-sm-2{{/if}}" for="{{#if id}}{{id}}{{else}}mySpinbox{{/if}}Input">{{#if label}}{{label}}{{/if}}</label>
 	<div{{#if horizontal}} class="col-sm-10"{{/if}}>
 		<div class="spinbox" {{#unless doNotInit}}data-initialize="spinbox"{{/unless}} id="{{#if id}}{{id}}{{else}}mySpinbox{{/if}}">
@@ -15,4 +15,4 @@
 		</div>
 		{{#if helptext}}<p class="help-block">{{helptext}}</p>{{/if}}
 	</div>
-</div>
+</div>
diff --git a/templates/underscore/bootstrap/input.html b/templates/underscore/bootstrap/input.html
@@ -1,8 +1,8 @@
 <!-- Text input http://getbootstrap.com/css/#forms -->
-<div class="form-group<% if(horizontal && inputsize.length > 0) {%> form-group-<%= inputsize %><% } %>">
+<div class="form-group<% if(horizontal && inputsize.length > 0) {%> form-group-<%= inputsize %><% } %><% if(validation) {%> has-<%= validation %><% } %><% if(required) {%> required<% } %>">
   <label for="<%= id %>" class="control-label<% if(horizontal) { %> col-sm-2<% } %>"><%= label %></label>
   <% if(horizontal) {%><div class="col-sm-10"><% } %>
     <input type="<%= inputtype %>" class="<% if(!horizontal && inputsize.length > 0) {%>input-<%= inputsize %> <% } %>form-control" id="<%= id %>" placeholder="<%= placeholder %>"<% if(required) {%> required <% } %><% if(readonly) {%> readonly <% } %><% if(isDisabled) {%> disabled <% } %>>
     <% if (helptext.length > 0) { %><p class="help-block"><%= helptext %></p><% } %>
   <% if(horizontal) {%></div><% } %>
-</div>
+</div>
diff --git a/templates/underscore/bootstrap/textarea.html b/templates/underscore/bootstrap/textarea.html
@@ -1,5 +1,5 @@
 <!-- Textarea http://getbootstrap.com/css/#textarea -->
-<div class="form-group">
+<div class="form-group<% if(validation) {%> has-<%= validation %><% } %><% if(required) {%> required<% } %>">
   <label class="control-label<% if(horizontal) { %> col-sm-2<% } %>" for="<%= id %>"><%= label %></label>
   <% if(horizontal) {%><div class="col-sm-10"><% } %>
     <textarea class="form-control" id="<%= id %>" name="<%= id %>" rows="<%= rows %>"<% if(required) {%> required <% } %><% if(readonly) {%> readonly <% } %><% if(isDisabled) {%> disabled <% } %>><%= textarea %></textarea>

diff --git a/templates/underscore/fuelux/checkboxes.html b/templates/underscore/fuelux/checkboxes.html
@@ -1,5 +1,5 @@
 <!-- Fuel UX Checkboxes http://getfuelux.com/javascript.html#checkbox -->
-<div class="form-group">
+<div class="form-group<% if(validation) {%> has-<%= validation %><% } %><% if(required) {%> required<% } %>">
   <label for="<%= name %>" class="control-label<% if(horizontal) { %> col-sm-2<% } %>"><%= label %></label>
   <div class="<% if(horizontal) {%> col-sm-10<% } %><% if(required) {%> required<% } %>">
     <% _.each(checkboxes, function(checkbox, i){ %><div class="checkbox">
@@ -10,4 +10,4 @@
     </div><% }); %>
     <% if (helptext.length > 0) { %><p class="help-block"><%= helptext %></p><% } %>
   </div>
-</div>
+</div>
diff --git a/templates/underscore/fuelux/input-with-combobox.html b/templates/underscore/fuelux/input-with-combobox.html
@@ -1,5 +1,5 @@
 <!-- Input With Combobox http://getfuelux.com/javascript.html#combobox -->
-<div class="form-group<% if(horizontal && inputsize.length > 0) {%> form-group-<%= inputsize %><% } %>">
+<div class="form-group<% if(horizontal && inputsize.length > 0) {%> form-group-<%= inputsize %><% } %><% if(validation) {%> has-<%= validation %><% } %><% if(required) {%> required<% } %>">
   <label class="control-label<% if(horizontal) { %> col-sm-2<% } %>" for="<%= id %>Input"><%= label %></label>
   <% if(horizontal) {%><div class="col-sm-10"><% } %>
     <div class="input-group <% if(placement=="appended") { %>input-append<% } else { %>input-prepend<% } %> dropdown combobox<% if(inputsize.length > 0) {%> input-group-<%= inputsize %><% } %>" data-initialize="combobox" id="<%= id %>">
@@ -14,4 +14,4 @@
     </div>
     <% if (helptext.length > 0) { %><p class="help-block"><%= helptext %></p><% } %>
   <% if(horizontal) {%></div><% } %>
-</div>
+</div>
diff --git a/templates/underscore/fuelux/radios.html b/templates/underscore/fuelux/radios.html
@@ -1,5 +1,5 @@
 <!-- Fuel UX Radios http://getfuelux.com/javascript.html#radio -->
-<div class="form-group">
+<div class="form-group<% if(validation) {%> has-<%= validation %><% } %><% if(required) {%> required<% } %>">
   <label for="<%= name %>" class="control-label<% if(horizontal) { %> col-sm-2<% } %>"><%= label %></label>
   <div class="<% if(horizontal) {%> col-sm-10<% } %><% if(required) {%> required<% } %>">
     <% _.each(radios, function(radio, i){ %><div class="radio">
@@ -10,4 +10,4 @@
     </div><% }); %>
     <% if (helptext.length > 0) { %><p class="help-block"><%= helptext %></p><% } %>
   </div>
-</div>
+</div>
diff --git a/templates/underscore/fuelux/selectlist.html b/templates/underscore/fuelux/selectlist.html
@@ -1,5 +1,5 @@
 <!-- Fuel UX Select http://getfuelux.com/javascript.html#selectlist -->
-<div class="form-group">
+<div class="form-group<% if(validation) {%> has-<%= validation %><% } %><% if(required) {%> required<% } %>">
   <label class="control-label<% if(horizontal) { %> col-sm-2<% } %>" for="<%= id %>"><%= label %></label>
   <div class="controls <%= buttonalign %><% if(horizontal) {%> col-sm-10<% } %>">
     <div class="btn-group selectlist" data-initialize="selectlist" data-resize="auto" id="<%= id %>">
@@ -15,4 +15,4 @@
     </div>
     <% if (helptext.length > 0) { %><p class="help-block"><%= helptext %></p><% } %>
   </div>
-</div>
+</div>
diff --git a/templates/underscore/fuelux/spinbox.html b/templates/underscore/fuelux/spinbox.html
@@ -1,5 +1,5 @@
 <!-- Spinbox http://getfuelux.com/javascript.html#spinbox -->
-<div class="form-group">
+<div class="form-group<% if(validation) {%> has-<%= validation %><% } %><% if(required) {%> required<% } %>">
   <label for="<%= id %>" class="control-label<% if(horizontal) { %> col-sm-2<% } %>"><%= label %></label>
   <div<% if(horizontal) {%> class="col-sm-10"<% } %>>
     <div class="spinbox" data-initialize="spinbox" id="<%= id %>">
@@ -15,4 +15,4 @@
     </div>
     <% if (helptext.length > 0) { %><p class="help-block"><%= helptext %></p><% } %>
   </div>
-</div>
+</div>