diff --git a/src/strand-checkbox/strand-checkbox.js b/src/strand-checkbox/strand-checkbox.js
index 6256f878..26b03fcf 100644
--- a/src/strand-checkbox/strand-checkbox.js
+++ b/src/strand-checkbox/strand-checkbox.js
@@ -80,7 +80,7 @@
 
 		_stateChanged: function(newVal, oldVal) {
 			this.debounce("stateChecked", this._handleStateChange);
-			this.fire("changed", { state: this.state }, true);
+			this.fire("changed", { state: this.state, value: this.value }, true);
 		},
 
 		_handleStateChange: function() {
diff --git a/src/strand-form/index.html b/src/strand-form/index.html
index 136da613..fcb07f3b 100644
--- a/src/strand-form/index.html
+++ b/src/strand-form/index.html
@@ -36,8 +36,8 @@
 	</head>
 
 	<body>
+		
 		<strand-form id="testForm" unresolved>
-			
 			<div class="col" span="1">
 				<strand-input fitparent name="input" placeholder="Type a Number"></strand-input>
 			</div>
@@ -64,7 +64,7 @@
 					</strand-radio>
 				</strand-group>
 			</div>
-
+			 
 			<div class="col" span="4">
 				<strand-repeater id="repeater" name="repeater">
 					<template preserve-content>
@@ -83,12 +83,15 @@
 					</template>
 				</strand-repeater>
 			</div>
-
 		</strand-form>
 
 		<!-- config via markup -->
-		<!-- 
-		<strand-form id="testForm" unresolved>
+		<!--
+		<strand-form 
+			id="testForm" 
+			columns="2"
+			v-space="20"
+			unresolved>
 			<div class="col" span="1">
 				<strand-input 
 					fitparent 
@@ -115,10 +118,15 @@
 				<strand-form-message id="special"></strand-form-message>
 			</div>
 			<div class="col" span="2">
+				<strand-header
+					id="radioDOMHead"
+					form-header
+					size="medium">Radio DOM Header</strand-header>
 				<strand-group 
 					fitparent 
 					name="radio"
-					label="Radio"
+					label="Gosh DOM It!"
+					label-ele="radioDOMHead"
 					error-msg="Choose a color"
 					validation="empty">
 					<strand-radio>
@@ -133,7 +141,7 @@
 				</strand-group>
 			</div>
 		</strand-form>
-		 -->
+		-->
 
 		<script>
 
@@ -197,27 +205,19 @@
 			};
 
 			// data that holds any actual values
-			// var data = {
-			// 	'input' : '1',
-			// 	'dropdown' : 'List Item 1', 
-			// 	'radio' : 'Red'
-			// };
-
-			// returned from server-side validation
-			// the key plus the message
-			// var returnedData = {
-			// 	'input' : 'Type a number greater than 0',
-			// 	'dropdown' : 'Select a different item', 
-			// 	'radio' : 'Select Green'
-			// };
+			var data = {
+				'input' : '1',
+				'dropdown' : 'List Item 1', 
+				'radio' : 'Red'
+			};
 
 			window.addEventListener('WebComponentsReady', function(e) {
 				var testForm = document.querySelector('#testForm'),
 					repeater = document.querySelector('#repeater');
 
-				// Ordering!
+				// Ordering DOESN'T matter anymore!
+				testForm.data = data;
 				testForm.config = config;
-				// testForm.data = data;
 
 				testForm.addEventListener('serialize-form', function(e){
 					console.log('serialize-form', e.detail);
diff --git a/src/strand-form/strand-form.js b/src/strand-form/strand-form.js
index edb013be..6671dc96 100644
--- a/src/strand-form/strand-form.js
+++ b/src/strand-form/strand-form.js
@@ -102,6 +102,18 @@
 				computed: '_displayMessage(_showFooterMessage, showFooterMessages)'
 			},
 			// config/initial data & settings:
+			_dataInitialized: {
+				type: Boolean,
+				value: false
+			},
+			_configInitialized: {
+				type: Boolean,
+				value: false
+			},
+			_initialized: {
+				type: Boolean,
+				computed: '_computeInitalized(_dataInitialized, _configInitialized)'
+			},
 			config: {
 				type: Object,
 				observer: '_configChanged',
@@ -111,7 +123,7 @@
 				type: Object,
 				observer: '_dataChanged',
 				value: function() { return {}; }
-			}
+			},
 		},
 
 		_initialData: {},
@@ -128,19 +140,21 @@
 		},
 
 		attached: function() {
-			if (this._isEmpty(this.config)) this.debounce('initConfig', this._initConfig);
-			if (this._isEmpty(this.data)) this.debounce('initData', this._initData);
+			this.debounce('initConfig', this._initConfig);
+			this.debounce('initData', this._initData);
 		},
 
 		_dataChanged: function(newVal, oldVal) {
 			if(!this._isEmpty(newVal)) {
 				this.debounce('initData', this._initData);
+				this._dataInitialized = false;
 			}
 		},
 
 		_configChanged: function(newVal, oldVal) {
 			if (!this._isEmpty(newVal)) {
 				this.debounce('initConfig', this._initConfig);
+				this._configInitialized = false;
 			}
 		},
 
@@ -168,14 +182,16 @@
 				domConfig[key] = {
 					field: 			field,
 					validation: 	attrs.validation || null,
-					noValidate: 	null,
+					noValidate: 	attrs.novalidate || false,
 					label: 			attrs.label || null,
+					labelEle: 		attrs['label-ele'] || null,
+					labelEleDOM: 	this._select('#'+attrs['label-ele']) || null,
 					errorMsg: 		attrs['error-msg'] || null,
 					errorMsgEle: 	attrs['error-msg-ele'] || null,
 					errorMsgEleDOM: this._select('#'+attrs['error-msg-ele']) || null,
 					parentEle: 		attrs['parent-ele'] || null,
 					parentEleDOM: 	this._select('#'+attrs['parent-ele']) || Polymer.dom(field).parentNode,
-					exclude: 		attrs.exclude || null
+					exclude: 		attrs.exclude || false,
 				};
 			}, this);
 			
@@ -188,23 +204,34 @@
 			for (var key in config) {
 				var field = config[key].field || this._select('[name='+key+']');
 				var cfg = config;
+				var existingLblEle = this._select('._'+key+'-label') || null;
+				var existingMsgEle = this._select('._'+key+'-error-msg') || null;
+
 
 				if (!field) throw 'There must be a corresponding DOM element for config[\''+key+'\']';
 
 				cfg[key] = StrandLib.DataUtils.copy(domConfig[key], cfg[key]);
-				cfg[key].errorMsgEleDOM = this._select('#'+cfg[key].errorMsgEle) || null;
+				cfg[key].errorMsgEleDOM = this._select('#'+cfg[key].errorMsgEle) || existingMsgEle;
+				cfg[key].labelEleDOM = this._select('#'+cfg[key].labelEle) || existingLblEle;
 				cfg[key].parentEleDOM = this._select('#'+cfg[key].parentEle) || Polymer.dom(field).parentNode;
 
 				// Create error message element (if one was not specified already)
-				if (cfg[key].errorMsg && !cfg[key].errorMsgEleDOM) {
+				// or update the dev provided / existing error msg element:
+				if (cfg[key].errorMsg && !existingMsgEle && !cfg[key].errorMsgEleDOM) {
 					this._createErrorMsg(key, cfg[key].errorMsg, cfg[key].parentEleDOM);
+				} else if (cfg[key].errorMsg && cfg[key].errorMsgEleDOM) {
+					this._updateErrorMsg(key, cfg[key].errorMsg, cfg[key].errorMsgEleDOM);
 				}
 
-				// Create the field label
-				if (cfg[key].label) {
+				// Create or update label (same as errorMsg)
+				if (cfg[key].label && !existingLblEle && !cfg[key].labelEleDOM) {
 					this._createLabel(key, cfg[key].label, field, cfg[key].parentEleDOM);
+				} else if (cfg[key].label && cfg[key].labelEleDOM) {
+					this._updateLabel(key, cfg[key].label, cfg[key].labelEleDOM);
 				}
 			}
+
+			this._configInitialized = true;
 		},
 
 		_initData: function() {
@@ -217,13 +244,13 @@
 					throw 'There must be a corresponding DOM element for data[\''+key+'\']';
 				}
 
-				var exclude	= this.config[key].exclude || null;
-				var value = this.data[key] || null;
+				var exclude	= this.config[key].exclude || false;
+				var value = this.data[key] ? this.data[key] : field.value;
 				
 				// If there was an initial value set in markup, use it
-				if (field.value && value === null) {
-					value = field.value;
-				}
+				// if (field.value && value === null) {
+				// 	value = field.value;
+				// }
 
 				// Update data
 				if (!exclude) this._updateData(key, value);
@@ -234,80 +261,83 @@
 					field.value = value;
 				}
 			}
+
+			this._dataInitialized = true;
+		},
+
+		_computeInitalized: function(_dataInitialized, _configInitialized) {
+			return _dataInitialized && _configInitialized;
 		},
 
 		_createErrorMsg:function(key, errorMsg, parentEleDOM) {
-			var existingMsgEle = this._select('._'+key+'-error-msg') || null;
+			errorMsgEleDOM = new Strand.FormMessage();
+			errorMsgEleDOM.type = 'error';
 
-			if (!existingMsgEle) {
-				// create one:
-				errorMsgEleDOM = new Strand.FormMessage();
-				errorMsgEleDOM.type = 'error';
+			errorMsgEleDOM.message = errorMsg;
+			errorMsgEleDOM.classList.add('_'+key+'-error-msg');
+			Polymer.dom(parentEleDOM).appendChild(errorMsgEleDOM);
 
-				errorMsgEleDOM.message = errorMsg;
-				errorMsgEleDOM.classList.add('_'+key+'-error-msg');
-				Polymer.dom(parentEleDOM).appendChild(errorMsgEleDOM);
+			this.config[key].errorMsgEleDOM = errorMsgEleDOM;
+		},
 
-				this.config[key].errorMsgEleDOM = errorMsgEleDOM;		
-			} else {
-				existingMsgEle.message = errorMsg;
-				
-				this.config[key].errorMsgEleDOM = existingMsgEle;	
-			}
+		_updateErrorMsg:function(key, errorMsg, errorMsgEleDOM) {
+			if (errorMsgEleDOM) errorMsgEleDOM.message = errorMsg;
 		},
 
 		_createLabel:function(key, label, field, parentEleDOM) {
-			var existingLblEle 	= this._select('._'+key+'-label') || null;
-			var labelTxt 		= document.createTextNode(label);
-			var formLabel 		= null;
-
-			if (!existingLblEle) {
-				// create a new label
-				formLabel = new Strand.Header();
+			var labelTxt = document.createTextNode(label);
+			var labelEleDOM = null;
+			
+			labelEleDOM = new Strand.Header();
+			labelEleDOM.size = 'medium';
+			labelEleDOM.setAttribute('name', name);
+			labelEleDOM.classList.add('_'+key+'-label');
+			// TODO: strand-form-header element(?)
+			labelEleDOM.setAttribute('form-header', true);
 
-				formLabel.size = 'medium';
-				formLabel.setAttribute('name', name);
-				formLabel.classList.add('_'+key+'-label');
-				formLabel.setAttribute('form-header', true);
+			Polymer.dom(labelEleDOM).appendChild(labelTxt);
+			Polymer.dom(parentEleDOM).insertBefore(labelEleDOM, field);
 
-				Polymer.dom(formLabel).appendChild(labelTxt);
-				Polymer.dom(parentEleDOM).insertBefore(formLabel, field);
+			this.config[key].labelEleDOM = labelEleDOM;
+		},
 
-				this.config[key].formLabel = formLabel;
-			} else {
-				Polymer.dom(existingLblEle).textContent = null;
-				Polymer.dom(existingLblEle).appendChild(labelTxt);
+		_updateLabel: function(key, label, labelEleDOM) {
+			if (labelEleDOM) {
+				var labelTxt = document.createTextNode(label);
 
-				this.config[key].formLabel = existingLblEle;
+				Polymer.dom(labelEleDOM).textContent = null;
+				Polymer.dom(labelEleDOM).appendChild(labelTxt);
 			}
 		},
 
 		// handle changes within the form
 		_handleChanged: function(e) {
-			var field 			= e.target;
-			var key				= field.getAttribute('name');
-			var value 			= null;
-			var validation 		= null;
-			var exclude			= null;
-			var isFormElement 	= this.config.hasOwnProperty(key);
-
-			if (isFormElement) {
-				exclude 		= this.config[key].exclude ? this.config[key].exclude : false;
-				value 			= e.detail.value;
-				validation 		= this.config[key].validation;
-
-				if (!exclude) {
-					this._updateData(key, value);
-					this._setUnsaved(this._diffData());
-				}
+			if (this._initialized) {
+				var field 			= e.target;
+				var key				= field.getAttribute('name');
+				var value 			= null;
+				var validation 		= null;
+				var exclude			= null;
+				var isFormElement 	= this.config.hasOwnProperty(key);
+
+				if (isFormElement) {
+					exclude 		= this.config[key].exclude ? this.config[key].exclude : false;
+					value 			= e.detail.value;
+					validation 		= this.config[key].validation;
+
+					if (!exclude) {
+						this._updateData(key, value);
+						this._setUnsaved(this._diffData());
+					}
 
-				if (validation && this.autoValidate) this._validateField(key, value);
+					if (validation && this.autoValidate) this._validateField(key, value);
 
-				// show messaging in the footer
-				if (this.unsaved && this.showUnsavedMessage) {
-					this._handleFooter(this.footerMessages.warning, 'warning', true);
-				} else {
-					this._showFooterMessage = false;
+					// show messaging in the footer
+					if (this.unsaved && this.showUnsavedMessage) {
+						this._handleFooter(this.footerMessages.warning, 'warning', true);
+					} else {
+						this._showFooterMessage = false;
+					}
 				}
 			}
 		},
@@ -331,7 +361,7 @@
 				var exclude 		= this.config[key].exclude;
 				var validation 		= this.config[key].validation;
 				var noValidateFunc 	= typeof this.config[key].noValidate === 'function';
-				var noValidate  	= this.config[key].noValidate || false;
+				var noValidate 		= this.config[key].noValidate || false;
 				var field 			= this.config[key].field;
 				var tagName 		= this.config[key].field.tagName.toLowerCase();
 				var valid 			= false;
@@ -339,8 +369,8 @@
 
 				// If the field is excluded, it's value will not be in the flat 'this.data' object
 				// and will need to be retrieved from the field itself
-				value = exclude ? this.config[key].field.value : this.data[key];
-				
+				value = exclude ? field.value : this.data[key];
+
 				if (noValidateFunc) {
 					// Call the function to derive true or false
 					noValidate = this.config[key].noValidate(key, value, this.data, this.view);
@@ -352,9 +382,8 @@
 
 				if (validation && !noValidate) {
 					valid = this._validateField(key, value);
-				} else if (tagName === 'strand-repeater') {
-					// special case for strand-repeater
-					// strand-repeater will handle it's own validation
+				} else if (tagName === 'strand-repeater' && !noValidate) {
+					// special case - strand-repeater will handle it's own validation
 					valid = field.validate();
 				} else if (validation && noValidate) {
 					// clean up prior validations if they were there
@@ -402,27 +431,14 @@
 			}
 			
 			// show or hide messaging in the ui
-			errorMsgEleDOM.message = errorMsg;
-			field.error = errorMsgEleDOM.visible = !valid;
-
-			return valid;
-		},
-
-		updateFieldErrors: function(data) {
-			for (var key in data) {
-				var field 			= this.config[key].field;
-				var errorMsgEleDOM 	= this.config[key].errorMsgEleDOM;
-				var errorMsg 		= data[key];
-
-				// update the stored messaging
-				this.config[key].errorMsg = errorMsg;
-
-				// display the messaging
+			if (errorMsgEleDOM) {
 				errorMsgEleDOM.message = errorMsg;
-				field.error = errorMsgEleDOM.visible = true;
+				errorMsgEleDOM.visible = !valid;
 			}
 
-			this._handleFooter(this.footerMessages.error, 'error', true);
+			field.error = !valid;
+
+			return valid;
 		},
 
 		resetFieldValidation: function(key) {
@@ -451,7 +467,18 @@
 			this.fire('cancel-form');
 		},
 
+		// TODO: public - needs doc
+		clearValidationState: function() {
+			for (var key in this.config) {
+				this.resetFieldValidation(key);
+			}
+		},
+
 		// footer and footer actions:
+		clearFooterMsg: function() {
+			this._handleFooter(undefined, undefined, false);
+		},
+
 		_validType: function(type) {
 			return type === 'primary' || type === 'secondary';
 		},
diff --git a/src/strand-test-form-view/index.html b/src/strand-test-form-view/index.html
index e58b0438..49dafa6a 100644
--- a/src/strand-test-form-view/index.html
+++ b/src/strand-test-form-view/index.html
@@ -5,6 +5,20 @@
 		<link rel="import" href="strand-test-form-view.html"/>
 	</head>
 	<body>
-		<strand-test-form-view></strand-test-form-view>
+		<strand-test-form-view id="testForm"></strand-test-form-view>
+		<script type="text/javascript">
+			window.addEventListener('WebComponentsReady', function(e) {
+				var testForm = document.querySelector('#testForm');
+
+				testForm.addEventListener('serialize-form', function(e){
+					console.log('serialize-form', e.detail);
+					console.log(e.detail.data);
+				});
+
+				testForm.addEventListener('cancel-form', function(e){
+					console.log('cancel-form');
+				});
+			});
+		</script>
 	</body>
 </html>
\ No newline at end of file
diff --git a/src/strand-test-form-view/strand-test-form-view.html b/src/strand-test-form-view/strand-test-form-view.html
index a8ffc92b..5bd2032d 100644
--- a/src/strand-test-form-view/strand-test-form-view.html
+++ b/src/strand-test-form-view/strand-test-form-view.html
@@ -31,23 +31,23 @@
 			</div>
 
 			<div class="col" span="1">
-				<strand-dropdown fitparent name="dropdown" placeholder="Select an Item">
-					<strand-list-item>List Item 1</strand-list-item>
-					<strand-list-item>List Item 2</strand-list-item>
-					<strand-list-item>List Item 3</strand-list-item>
-					<strand-list-item>List Item 4</strand-list-item>
+				<strand-dropdown fitparent name="dropdown" placeholder="Select an Item" value="4">
+					<strand-list-item value="1">List Item 1</strand-list-item>
+					<strand-list-item value="2">List Item 2</strand-list-item>
+					<strand-list-item value="3">List Item 3</strand-list-item>
+					<strand-list-item value="4">List Item 4</strand-list-item>
 				</strand-dropdown>
 			</div>
 
 			<div class="col" span="2">
-				<strand-group fitparent unresolved name="radio">
-					<strand-radio>
+				<strand-group fitparent unresolved name="radio" value="1">
+					<strand-radio value="1">
 						<label>Red</label>
 					</strand-radio>
-					<strand-radio>
+					<strand-radio value="2">
 						<label>Green</label>
 					</strand-radio>	
-					<strand-radio>
+					<strand-radio value="3">
 						<label>Blue</label>
 					</strand-radio>			
 				</strand-group>
@@ -104,15 +104,15 @@
 				<strand-checkbox 
 					form-header
 					name="use_mm_freq"
-					on-changed="_useMMFreqOnChange"
+					value="{{use_mm_freq}}"
 					checked="{{use_mm_freq}}">
 					<strand-header size="medium">Campaign Frequency Cap</strand-header>
 				</strand-checkbox>
 				<div class="custom-item freq-cap">
 					<strand-dropdown 
 						id="typeDdl" 
-						disabled$="{{!use_mm_freq}}"
-						no-validate$="{{!use_mm_freq}}"
+						disabled$="{{_useMMFreq(use_mm_freq)}}"
+						no-validate$="{{_useMMFreq(use_mm_freq)}}"
 						name="frequency_type"
 						on-changed="_freqTypeChanged"
 						value="{{frequency_type}}" 
@@ -130,7 +130,6 @@
 					<strand-dropdown 
 						id="standardSizeDdl" 
 						disabled$="{{!use_mm_freq}}"
-						no-validate$="{{!use_mm_freq}}"
 						name="frequency_interval"
 						on-changed="_freqIntervalChanged" 
 						value="{{frequency_interval}}" 
diff --git a/src/strand-test-form-view/strand-test-form-view.js b/src/strand-test-form-view/strand-test-form-view.js
index c4e3ecc2..737dbf68 100644
--- a/src/strand-test-form-view/strand-test-form-view.js
+++ b/src/strand-test-form-view/strand-test-form-view.js
@@ -40,8 +40,8 @@
 			},
 			use_mm_freq: {
 				type: Boolean,
-				value: 0,
-				observer: '_useMMFreqChanged'
+				value: false,
+				// observer: '_useMMFreqChanged'
 			},
 			// form data/config:
 			formConfig: {
@@ -59,7 +59,7 @@
 					},
 					'radio' : {
 						validation: function(name, value, data, view) {
-							return data[name] === 'Red' && value === 'Red';
+							return data[name] === '1' && value === '1';
 						},
 						errorMsg: 'You need to select \'Red\'',
 						label: 'Select a Color'
@@ -67,9 +67,6 @@
 					// first custom item
 					'widthHeight' : {
 						validation: 'empty',
-						// noValidate: function(name, value, data, view) {
-						// 	return !view.standardSize;
-						// },
 						errorMsg: 'You need to select a standard size',
 						errorMsgEle: 'heightWidthError',
 						exclude: true
@@ -78,9 +75,6 @@
 						validation: function(name, value, data, view) {
 							return parseInt(value) >= 0;
 						},
-						// noValidate: function(name, value, data, view) {
-						// 	return view.standardSize;
-						// },
 						errorMsg: 'Enter a width',
 						parentEle: 'widthHeightWrapper'
 					},
@@ -88,38 +82,27 @@
 						validation: function(name, value, data, view) {
 							return parseInt(value) >= 0;
 						},
-						// noValidate: function(name, value, data, view) {
-						// 	return view.standardSize;
-						// },
 						errorMsg: 'Enter a height',
 						parentEle: 'widthHeightWrapper'
 					},
 					// second custom item
-					'use_mm_freq' : {
-						// doesn't need anything
-					},
+					'use_mm_freq' : {},
 					'frequency_type' : {
 						parentEle: 'freqCapWrapper',
 						validation: 'empty',
-						// noValidate: function(name, value, data, view) {
-						// 	return view.use_mm_freq;
-						// },
 						errorMsg: 'Select a type'
 					},
 					'frequency_amount' : {
 						parentEle: 'freqCapWrapper',
 						validation: 'int|empty',
-						// noValidate: function(name, value, data, view) {
-						// 	return view.use_mm_freq;
-						// },
 						errorMsg: 'Enter an amount'
 					},
 					'frequency_interval' : {
 						parentEle: 'freqCapWrapper',
 						validation: 'empty',
-						// noValidate: function(name, value, data, view) {
-						// 	return view.use_mm_freq;
-						// },
+						noValidate: function(name, value, data, view) {
+							return !view.use_mm_freq;
+						},
 						errorMsg: 'Select an interval'
 					}
 				}
@@ -149,9 +132,9 @@
 		},
 
 		_standardSizeDdl: function(e) {
-			var dimensions = e.detail.value.split('x'),
-				width = parseInt(dimensions[0]),
-				height = parseInt(dimensions[1]);
+			var dimensions = e.detail.value.split('x');
+			var width = parseInt(dimensions[0]);
+			var height = parseInt(dimensions[1]);
 			this._dimensionsChanged(width, height);
 		},
 
@@ -177,13 +160,9 @@
 			this.frequency_interval = e.detail.value;
 		},
 
-		_useMMFreqOnChange: function(e) {
-			if (e.detail.state === 'checked') {
-				this.use_mm_freq = 1;
-			} else if (e.detail.state === 'unchecked') {
-				this.use_mm_freq = 0;
-			}
-		},
+		// _useMMFreqOnChange: function(e) {
+		// 	this.use_mm_freq = e.detail.value | 0;
+		// },
 
 		_useMMFreqChanged: function(newVal, oldVal) {
 			if (!newVal) {	
@@ -191,6 +170,10 @@
 				this.$.testForm.resetFieldValidation('frequency_interval');
 				this.$.testForm.resetFieldValidation('frequency_amount');
 			}
+		},
+
+		_useMMFreq: function(use_mm_freq) {
+			return !use_mm_freq;
 		}
 	});
 
diff --git a/test/strand-form.html b/test/strand-form.html
index b112b79e..348aeeb2 100644
--- a/test/strand-form.html
+++ b/test/strand-form.html
@@ -25,7 +25,7 @@
 					<strand-list-item>List Item 4</strand-list-item>
 				</strand-dropdown>
 			</div>
-			<div class="col" span="2">
+			<div class="col" span="1">
 				<strand-group fitparent unresolved name="radio">
 					<strand-radio>
 						<label>Red</label>
@@ -38,57 +38,75 @@
 					</strand-radio>
 				</strand-group>
 			</div>
+			<div class="col" span="1">
+				<strand-input 
+					fitparent 
+					name="no_validate"
+					label="Don't Validate Me"
+					value="some value"
+					placeholder="Don't even bother"></strand-input>
+			</div>
 		</strand-form>
 	</strand-form>
 
-	<strand-form id="testForm2" unresolved>
-		<div class="col" span="1">
-			<strand-input 
-				fitparent 
-				name="input"
-				label="Input"
-				error-msg="Type a number"
-				validation="int|empty"
-				placeholder="Type a Number"></strand-input>
-		</div>
-		<div class="col" span="1">
-			<strand-dropdown 
-				fitparent 
-				name="dropdown" 
-				label="Dropdown"
-				error-msg="Select an item"
-				error-msg-ele="special"
-				validation="empty"
-				placeholder="Select an Item">
-				<strand-list-item>List Item 1</strand-list-item>
-				<strand-list-item>List Item 2</strand-list-item>
-				<strand-list-item>List Item 3</strand-list-item>
-				<strand-list-item>List Item 4</strand-list-item>
-			</strand-dropdown>
-			<!-- <strand-form-message id="special"></strand-form-message> -->
-		</div>
-		<div class="col" span="2">
-			<strand-group 
-				fitparent 
-				name="radio"
-				label="Radio"
-				error-msg="Choose a color"
-				validation="empty">
-				<strand-radio>
-					<label>Red</label>
-				</strand-radio>
-				<strand-radio>
-					<label>Green</label>
-				</strand-radio>	
-				<strand-radio>
-					<label>Blue</label>
-				</strand-radio>
-			</strand-group>
-		</div>
-	</strand-form>
+	<template id="testDomBind" is="dom-bind">
+		<strand-form id="testForm2" unresolved>
+			<div class="col" span="1">
+				<strand-input 
+					fitparent 
+					name="input"
+					label="Input"
+					error-msg="Type a number"
+					validation="int|empty"
+					placeholder="Type a Number"></strand-input>
+			</div>
+			<div class="col" span="1">
+				<strand-dropdown 
+					fitparent 
+					name="dropdown" 
+					label="Dropdown"
+					error-msg="Select an item"
+					error-msg-ele="special"
+					validation="empty"
+					placeholder="Select an Item">
+					<strand-list-item>List Item 1</strand-list-item>
+					<strand-list-item>List Item 2</strand-list-item>
+					<strand-list-item>List Item 3</strand-list-item>
+					<strand-list-item>List Item 4</strand-list-item>
+				</strand-dropdown>
+				<!-- <strand-form-message id="special"></strand-form-message> -->
+			</div>
+			<div class="col" span="2">
+				<strand-checkbox
+					form-header
+					value="{{some_bool_val}}"
+					checked="{{some_bool_val}}">
+					<strand-header size="medium">Some Boolean Value</strand-header>
+				</strand-checkbox>
+				<strand-group 
+					fitparent 
+					name="radio"
+					error-msg="Choose a color"
+					validation="empty"
+					disabled$="{{!some_bool_val}}"
+					no-validate$="{{!some_bool_val}}">
+					<strand-radio>
+						<label>Red</label>
+					</strand-radio>
+					<strand-radio>
+						<label>Green</label>
+					</strand-radio>	
+					<strand-radio>
+						<label>Blue</label>
+					</strand-radio>
+				</strand-group>
+			</div>
+		</strand-form>
+	</template>
 		
 	<script>
 
+		var noValidateInput = true; 
 		var config = {
 			'input' : {
 				validation: 'int|empty',
@@ -111,120 +129,260 @@
 				errorMsgEle: null,
 				errorMsg: 'You need to select \'Red\'',
 				label: 'Select a Color'
+			},
+			'no_validate' : {
+				validation: 'alpha|empty',
+				noValidate: function(name, value, data, view) {
+					return noValidateInput;
+				}
 			}
 		};
 
 		window.addEventListener('WebComponentsReady', function(e) {
 			var testForm1 = document.querySelector('#testForm1');
 			testForm1.config = config;
-		});
 
-		describe("strand-form", function() {
-	
-			it("should exist", function() {
-				var a = new Strand.Form();
-				a.nodeName.should.equal("STRAND-FORM");
-			});
+			var testDomBind = document.querySelector('#testDomBind');
+			testDomBind.some_bool_val = false;
 
-			it("should have updated config with DOM references to it's parent element and fields", function() {
-				var a = document.querySelector('#testForm1');
-				var config = a.config;
-				var fields = [];
-				var parents = [];
-				var objLength = Object.keys(config).length;
+			describe("strand-form", function() {
+		
+				it("should exist", function() {
+					var a = new Strand.Form();
+					a.nodeName.should.equal("STRAND-FORM");
+				});
 
-				for (var item in config) {
-					fields.push(config[item].field);
-					parents.push(config[item].parentEleDOM);
-				}
+				it("should have updated config with DOM references to it's parent element and fields", function() {
+					var a = document.querySelector('#testForm1');
+					var config = a.config;
+					var fields = [];
+					var parents = [];
+					var objLength = Object.keys(config).length;
 
-				fields[0].should.exist;
-				parents[0].should.exist;
-				fields[0].should.be.an.object;
-				parents[0].should.be.an.object;
-				fields.length.should.equal(objLength);
-				parents.length.should.equal(objLength);
-			});
+					for (var item in config) {
+						fields.push(config[item].field);
+						parents.push(config[item].parentEleDOM);
+					}
 
-			it("should have created labels", function() {
-				var a = document.querySelector('#testForm1');
-				var config = a.config;
-				var labels = [];
-				var objLength = Object.keys(config).length;
+					fields[0].should.exist;
+					parents[0].should.exist;
+					fields[0].should.be.an.object;
+					parents[0].should.be.an.object;
+					fields.length.should.equal(objLength);
+					parents.length.should.equal(objLength);
+				});
 
-				for (var item in config) {
-					labels.push(config[item].formLabel);
-				}
+				it("config object should have a specific data structure", function() {
+					/*
+					{
+						thing: {
+							// the message to display
+							errorMsg: String, 
 
-				labels[0].should.exist;
-				labels[0].should.be.an.object;
-				labels.length.should.equal(objLength);
-			});
+							// the id of the element provided by the developer
+							errorMsgEle: String || null, 
 
-			it("should have created error messages", function() {
-				var a = document.querySelector('#testForm1');
-				var config = a.config;
-				var errors = [];
-				var objLength = Object.keys(config).length;
+							// ref - error msg - generated or provided by the develper
+							errorMsgEleDOM: Object, 
+							
+							// exclude this field from the flattend form data when serialized
+							exclude: Boolean, 
+							
+							// the field to act upon
+							field: Object, 
+							
+							// the label to display
+							label: String || null, 
 
-				for (var item in config) {
-					errors.push(config[item].errorMsgEleDOM);
-				}
+							// the id of the element provided by the developer
+							labelEle: String || null, 
 
-				errors[0].should.exist;
-				errors[0].should.be.an.object;
-				errors.length.should.equal(objLength);
-			});
+							// ref - label - generated or provided by the developer 
+							labelEleDOM: Object,
 
-			it("should have created a config from DOM", function() {
-				var a = document.querySelector('#testForm2');
-				var config = a.config;
-				var objLength = Object.keys(config).length;
+							// exclude this field from validation, can also be a function which returns Bool: function(name, value, data, view)
+							noValidate: Boolean / Function || null,
+							
+							// the parent ele of the field, where label and msg added
+							parentEle: String || null,
 
-				a.config.should.exist;
-				objLength.should.equal(3);
-			});
+							// ref - parent ele - parent of the field 
+							parentEleDOM: Object, 
+							
+							// pipe delimited list of common validations (see validator lib), can also be a function that returns Bool: function(name, value, data, view)
+							validation: String / Function || null, 
+						},
+					}
+					*/
 
-			it("should have updated the config from DOM with DOM references to it's parent element and fields", function() {
-				var a = document.querySelector('#testForm2');
-				var config = a.config;
-				var fields = [];
-				var parents = [];
-				var objLength = Object.keys(config).length;
+					var a = document.querySelector('#testForm1');
+					var config = a.config;
+					var configObj = a.config.dropdown;
 
-				for (var item in config) {
-					fields.push(config[item].field);
-					parents.push(config[item].parentEleDOM);
-				}
+					configObj.errorMsg.should.exist;
+					configObj.errorMsg.should.be.a.string;
 
-				fields[0].should.exist;
-				parents[0].should.exist;
-				fields[0].should.be.an.object;
-				parents[0].should.be.an.object;
-				fields.length.should.equal(objLength);
-				parents.length.should.equal(objLength);
-			});
+					should.not.exist(configObj.errorMsgEle); // was never set in the config
+
+					configObj.errorMsgEleDOM.should.exist;
+					configObj.errorMsgEleDOM.should.be.an.object;
+
+					configObj.exclude.should.exist;
+					configObj.exclude.should.be.false;
+
+					configObj.field.should.exist;
+					configObj.field.should.be.an.object;
+
+					configObj.label.should.exist;
+					configObj.label.should.be.a.string;
+
+					should.not.exist(configObj.labelEle);
 
-			it("should dispatch a 'serialize-form' event with a detail containing flat data", function(done) {
-				var a = document.querySelector('#testForm1');
-				var s = sinon.spy();
+					configObj.labelEleDOM.should.exist;
+					configObj.labelEleDOM.should.be.an.object;
 
-				a.addEventListener("serialize-form", s);
-				a.serializeForm();
+					configObj.noValidate.should.exist;
+					configObj.noValidate.should.be.false;
 
-				flush(function() {
-					var evt = s.args[0][0];
-					var detail = evt.detail; // {input: null, dropdown: null, radio: null}
+					should.not.exist(configObj.parentEle);
 
-					s.calledOnce.should.be.true;
-					s.returned(sinon.match.same(detail));
-					done();
+					configObj.parentEleDOM.should.exist;
+					configObj.parentEleDOM.should.be.an.object;
 				});
 
-			});
+				it("should have created labels", function() {
+					var a = document.querySelector('#testForm1');
+					var config = a.config;
+					var labels = [];
+					var objLength = Object.keys(config).length;
+
+					for (var item in config) {
+						labels.push(config[item].labelEleDOM);
+					}
+
+					labels[0].should.exist;
+					labels[0].should.be.an.object;
+					labels.length.should.equal(objLength);
+				});
+
+				it("should have created error messages", function() {
+					var a = document.querySelector('#testForm1');
+					var config = a.config;
+					var errors = [];
+					var objLength = Object.keys(config).length;
 
+					for (var item in config) {
+						errors.push(config[item].errorMsgEleDOM);
+					}
+
+					errors[0].should.exist;
+					errors[0].should.be.an.object;
+					errors.length.should.equal(objLength);
+				});
+
+				it("should have created a config from DOM", function() {
+					var a = document.querySelector('#testForm2');
+					var config = a.config;
+					var objLength = Object.keys(config).length;
+
+					a.config.should.exist;
+					objLength.should.equal(3);
+				});
+
+				it("should dispatch a 'serialize-form' event with a detail containing flat data", function(done) {
+					var a = document.querySelector('#testForm1');
+					var s = sinon.spy();
+
+					a.addEventListener("serialize-form", s);
+					a.serializeForm();
+
+					flush(function() {
+						var evt = s.args[0][0];
+						var detail = evt.detail; // {input: null, dropdown: null, radio: null}
+
+						s.calledOnce.should.be.true;
+						s.returned(sinon.match.same(detail));
+						done();
+					});
+
+				});
+
+				it("should accept & call no validate method on serialize", function(done) {
+					var a = document.querySelector('#testForm1');
+					var s = sinon.spy();
+
+					a.addEventListener("serialize-form", s);
+					a.serializeForm();
+
+					flush(function() {
+						var evt = s.args[0][0];
+						var invalid = evt.detail.invalidFields;
+
+						// should have validated 3 out of 4 fields
+						s.calledOnce.should.be.true;
+						invalid.length.should.equal(3);
+						done();
+					});
+				});
+
+				it("should have updated the config from DOM with DOM references to it's parent element and fields", function() {
+					var a = document.querySelector('#testForm2');
+					var config = a.config;
+					var fields = [];
+					var parents = [];
+					var objLength = Object.keys(config).length;
+
+					for (var item in config) {
+						fields.push(config[item].field);
+						parents.push(config[item].parentEleDOM);
+					}
+
+					fields[0].should.exist;
+					parents[0].should.exist;
+					fields[0].should.be.an.object;
+					parents[0].should.be.an.object;
+					fields.length.should.equal(objLength);
+					parents.length.should.equal(objLength);
+				});
+
+				it("should validate all 2 out of 3 fields", function(done) {
+					var a = document.querySelector('#testForm2');
+					var s = sinon.spy();
+
+					a.addEventListener("serialize-form", s);
+					a.serializeForm();
+
+					flush(function() {
+						var evt = s.args[0][0];
+						var invalid = evt.detail.invalidFields;
+
+						s.calledOnce.should.be.true;
+						invalid.length.should.equal(2);
+						done();
+					});
+				});
+
+				it("should validate all 3 out of 3 fields", function(done) {
+					var a = document.querySelector('#testForm2');
+					var s = sinon.spy();
+
+					testDomBind.some_bool_val = true;
+					a.addEventListener("serialize-form", s);
+					a.serializeForm();
+
+					flush(function() {
+						var evt = s.args[0][0];
+						var invalid = evt.detail.invalidFields;
+
+						s.calledOnce.should.be.true;
+						invalid.length.should.equal(3);
+						done();
+					});
+				});
+			});
 		});
 
+
 	</script>
 
 </body>
