diff --git a/src/mm-form-message/mm-form-message.html b/src/mm-form-message/mm-form-message.html
index d1847dec..0a2e3613 100644
--- a/src/mm-form-message/mm-form-message.html
+++ b/src/mm-form-message/mm-form-message.html
@@ -11,7 +11,7 @@
 <dom-module id="mm-form-message">
 	<link rel="import" type="css" href="mm-form-message.css"/>
 	<template>
-		<mm-inline-box id="inputError" type="{{type}}" fitparent>{{message}}</mm-inline-box>
+		<mm-inline-box id="inputError" type="{{type}}" visible$="{{visible}}" fitparent>{{message}}</mm-inline-box>
 	</template>
 </dom-module>
 
diff --git a/src/mm-form-message/mm-form-message.js b/src/mm-form-message/mm-form-message.js
index 30b2ca97..fe67308c 100644
--- a/src/mm-form-message/mm-form-message.js
+++ b/src/mm-form-message/mm-form-message.js
@@ -19,6 +19,10 @@
 			},
 			message: {
 				type: String
+			},
+			visible: {
+				type: Boolean,
+				value: false
 			}
 		},
 	
diff --git a/src/mm-form-message/mm-form-message.scss b/src/mm-form-message/mm-form-message.scss
index dacf9838..f89d89b7 100644
--- a/src/mm-form-message/mm-form-message.scss
+++ b/src/mm-form-message/mm-form-message.scss
@@ -9,4 +9,12 @@
 :host {
 	display: block;
 	position: relative;
+}
+
+mm-inline-box {
+	display: none;
+}
+
+mm-inline-box[visible] {
+	display: block;
 }
\ No newline at end of file
diff --git a/src/mm-form/index.html b/src/mm-form/index.html
index b1d2da48..0398dff7 100644
--- a/src/mm-form/index.html
+++ b/src/mm-form/index.html
@@ -46,11 +46,11 @@
 
 			<!-- row 1 -->
 			<div class="col" span="1">
-				<mm-input fitparent name="input" placeholder="Type a Number" value="123"></mm-input>
+				<mm-input fitparent name="input" placeholder="Type a Number"></mm-input>
 			</div>
 
 			<div class="col" span="1">
-				<mm-dropdown fitparent name="dropdown" placeholder="Select an Item" value="List Item 1">
+				<mm-dropdown fitparent name="dropdown" placeholder="Select an Item">
 					<mm-list-item>List Item 1</mm-list-item>
 					<mm-list-item>List Item 2</mm-list-item>
 					<mm-list-item>List Item 3</mm-list-item>
@@ -59,7 +59,7 @@
 			</div>
 
 			<div class="col" span="2">
-				<mm-group fitparent unresolved name="radio" value="Red">
+				<mm-group fitparent unresolved name="radio">
 					<mm-radio>
 						<label>Red</label>
 					</mm-radio>
@@ -89,7 +89,7 @@
 
 		<script>
 
-			var formData = {
+			var data = {
 				'input' : {
 					validation: 'int|empty',
 					errorMsg: 'You need to type a number',
@@ -101,7 +101,9 @@
 					label: 'Select an Item'
 				},
 				'radio' : {
-					validation: 'empty',
+					validation: function(name, value, data) {
+						return data[name] === 'Red' && value === 'Red';
+					},
 					errorMsg: 'You need to select a color',
 					label: 'Select a Color'
 				}
@@ -110,7 +112,7 @@
 			window.addEventListener('WebComponentsReady', function(e) {
 				var testForm = document.querySelector('#testForm');
 
-				testForm.data = formData;
+				testForm.data = data;
 
 				testForm.addEventListener('serialize-form', function(e){
 					console.log('serialize-form', e.detail);
diff --git a/src/mm-form/mm-form.js b/src/mm-form/mm-form.js
index 9b959be0..deb56ba1 100644
--- a/src/mm-form/mm-form.js
+++ b/src/mm-form/mm-form.js
@@ -6,6 +6,8 @@
 */
 (function (scope) {
 
+	var rules = StrandLib.Validator.rules;
+
 	scope.MMForm = Polymer({
 		is: 'mm-form',
 
@@ -15,24 +17,6 @@
 			StrandTraits.Columnable
 		],
 
-
-		/*
-			// TODO: new direction for this
-
-			// data
-			{
-				key: value,
-				key: value,
-				key: value
-			}
-
-			// validation
-			{
-				key: function(name, value, data, validators)
-			}
-
-		*/	
-
 		properties: {
 			
 			unsaved: {
@@ -47,18 +31,24 @@
 				notify: true
 			},
 
-			// what comes in:
+			// configuration/initial settings:
 			data: {
 				type: Object,
 				observer: '_dataChanged'
 			},
 
-			// will store updates/serialize - data becomes:
+			// flat data we can manipulate, without change handlers firing
 			_formData: {
 				type: Object,
 				value: function() { return {}; }
 			},
 
+			// read only data that is exposed to end dev:
+			formData: {
+				type: Object,
+				readOnly: true
+			},
+
 			// Footer related
 			footerMessages: {
 				type: Object,
@@ -120,62 +110,13 @@
 				type: Boolean,
 				computed: '_displayMessage(_showFooterMessage, showFooterMessages)'
 			}
-
 		},
 
 		listeners: {
 			'changed' : '_handleChanged'
 		},
 
-		// // common validation rules
-		// rules: {
-		// 	email: function(i) {
-		// 		// var regEx = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-		// 		// return regEx.test(i);
-		// 		return validator.isEmail(i);
-		// 	},
-		// 	alpha: function(i) {
-		// 		// var regEx = /^\w+$/;
-		// 		// return regEx.test(i);
-		// 		return validation.isAlpha(i);
-		// 	},
-		// 	int: function(i) {
-		// 		// var regEx = /^\d+$/;
-		// 		// return regEx.test(i);
-		// 		return validator.isInt(i); 
-		// 	},
-		// 	decimal: function(i) {
-		// 		// var regEx = /^\d*[.]\d+$/;
-		// 		// return regEx.test(i);
-		// 		return validator.isDecimal(i);
-		// 	},
-		// 	whitespace: function(i) {
-		// 		// var regEx = /\s/;
-		// 		// return i.length > 0 && !regEx.test(i);
-		// 		return validator.isWhitespace(i);
-		// 	},
-		// 	checked: function(i) {
-		// 		return validator.isChecked(i);
-		// 	},
-		// 	empty: function(i) {
-		// 		return validator.isEmpty(i);
-		// 	},
-		// 	blank: function(i) {
-		// 		return validator.isBlank(i);
-		// 	}
-		// },
-
-		// *******************************
-		// collect all the things (and data)
-		// _canInit: false,
-
-		attached: function() {
-			// this._canInit = true;
-			// this._initForm(this.data);
-		},
-		
 		_dataChanged: function(newVal, oldVal) {
-			// if (this._canInit) this._initForm(newVal); 
 			this._initForm(newVal);
 		},
 
@@ -184,48 +125,63 @@
 				var name 			= key,
 					label 			= this.data[key].label,
 					errorMsg 		= this.data[key].errorMsg,
-					ele 			= Polymer.dom(this).querySelector('[name='+name+']'),
-					parentEle 		= Polymer.dom(ele).parentNode,
-					// TODO: if there was an initial value in markup - handle it
-					value			= null;
-
-				if (ele.value || this.data[key].value) {
-					value = ele.value || this.data[key].value;
+					field 			= Polymer.dom(this).querySelector('[name='+name+']'),
+					parentEle 		= Polymer.dom(field).parentNode,
+					value			= this.data[key].value || null;
+
+				// If there was an initial value set in markup, use that
+				// However, values set in the config will always 'win':
+				if (field.value && value === null) {
+					value = field.value;
 				}
 
+				// store the field and parent element just in case we need
+				// to reference those later
+				this.data[name].field = field;
+				this.data[name].parentEle = parentEle;
+
 				this._updateData(name, value);
-				this._createLabel(name, parentEle, ele, label);
 				this._createErrorMsg(name, parentEle, errorMsg);
+				this._createLabel(name, parentEle, field, label);
 			}
 		},
 
 		_createErrorMsg:function(name, parentEle, msg) {
-			var errorMsgEle = Polymer.dom(parentEle).querySelector('mm-form-message[name='+name+']') || null;
+			var errorMsgEle = Polymer.dom(parentEle).querySelector('._'+name+'-error-msg') || null;
 
 			if (!errorMsgEle) {
 				errorMsgEle = new Strand.FormMessage();
 				errorMsgEle.type = 'error';
-				errorMsgEle.setAttribute('name', name);
+
 				errorMsgEle.message = msg;
-				Polymer.dom(parentEle).appendChild(errorMsgEle);					
+				Polymer.dom(parentEle).appendChild(errorMsgEle);
+
+				errorMsgEle.classList.add('_'+name+'-error-msg');
+				this.data[name].errorMsgEle = errorMsgEle;					
 			} else {
 				errorMsgEle.message = msg;
 			}
 		},
 
-		_createLabel:function(name, parentEle, ele, label) {
-			var labelEle = Polymer.dom(parentEle).querySelector('mm-header[name='+name+']') || null,
+		_createLabel:function(name, parentEle, field, label) {
+			var labelEle = Polymer.dom(parentEle).querySelector('._'+name+'-label') || null,
 				labelTxt = null;
 
 			if (!labelEle) {
 				labelTxt = document.createTextNode(label);
 				labelEle = new Strand.Header();
+
 				labelEle.size = 'medium';
 				labelEle.setAttribute('name', name);
+
 				Polymer.dom(labelEle).appendChild(labelTxt);
-				Polymer.dom(parentEle).insertBefore(labelEle, ele);
+				Polymer.dom(parentEle).insertBefore(labelEle, field);
+
+				labelEle.classList.add('_'+name+'-label');
+				this.data[name].labelEle = labelEle;
 			} else {
 				labelEle.innerHTML = null;
+
 				labelTxt = document.createTextNode(label);
 				Polymer.dom(labelEle).appendChild(labelTxt);
 			}
@@ -250,56 +206,76 @@
 		// *******************************
 		// handle changes within the form
 		_handleChanged: function(e) {
-			console.log('_handleChanged: ', e, e.detail.value);
-			
-			// var name = e.target.getAttribute('name'),
-			// 	value = e.detail.value,
-			// 	item = this.formItems[name]; // make sure it's an item we actually care about
-
-			// if (item && value) {
-			// 	this._updateData(name, item.value);
-			// 	this.unsaved = this._diffData();
-
-			// 	// trigger a warning message in the footer
-			// 	if (this.unsaved && this.showUnsavedMessage) {
-			// 		this.footerMessage = this.footerMessages.warning;
-			// 		this.footerType = 'warning';
-			// 		this._showFooterMessage = true;
-			// 	}
-			// }
+			// console.log('_handleChanged: ', e.detail.value);
+			var field 			= e.target,
+				name 			= e.target.getAttribute('name'),
+				value 			= e.detail.value,
+				validation		= this.data[name].validation,
+				isFormElement 	= this._formData.hasOwnProperty(name);
+
+			if (isFormElement) {
+				this._updateData(name, value);
+				this.unsaved = this._diffData();
+				this._validateField(name, validation, value, field);
+
+				// trigger an unsaved warning message in the footer
+				if (this.unsaved && this.showUnsavedMessage) {
+					this._footerMessage = this.footerMessages.warning;
+					this._footerType = 'warning';
+					this._showFooterMessage = true;
+				}
+			}
 		},
 
 		_updateData: function(name, value) {
 			this._formData[name] = value;
-			console.log(this._formData);
+			this._setFormData(this._formData);
+			// console.log('_formData', this._formData);
+			// console.log('formData', this.formData);
+			// console.log('*******************************');
 		},
 
 		_diffData: function() {
-			// var diff = [];
-			
-			// for (var key in this.formData) {
-			// 	if (key !== this._initialFormData[key]) {
-			// 		diff.push(key);	
-			// 	}
-			// }
-			// return diff.length > 0;
+			var diff = [];
+			for (var key in this.formData) {
+				if (key !== this.data[key].value) {
+					diff.push(key);	
+				}
+			}
+			return diff.length > 0;
 		},
 
 		// *******************************
 		// form validation
 		// validate per field:
-		_validateField: function(validation, value) {
-			// construct the test set based on pipes:
-			var testSet = validation.replace(/\s/g, '').split("|"),
-				result = [];
-
-			result = testSet.map(function(item) {
-				return this.rules[item](value);
-			}, this).filter(function(item) {
-				return item === true;
-			});
-
-			return result.length === testSet.length;
+		_validateField: function(name, validation, value, field) {
+			var valid = false;
+
+			if (typeof(validation) === 'string') {
+				var testSet = validation.replace(/\s/g, '').split("|"),
+					result = [];
+
+				result = testSet.map(function(item) {
+					return rules[item](value);
+				}, this).filter(function(item) {
+					return item === true;
+				});
+
+				valid = result.length === testSet.length;
+			} else if (typeof(validation) === 'function') {
+				valid = validation(name, value, this.formData);
+			}
+			
+			this._showError(name, valid);
+
+			return valid;
+		},
+
+		_showError: function(name, valid) {
+			var field = this.data[name].field,
+				errorMsg = this.data[name].errorMsgEle;
+
+			field.error = errorMsg.visible = !valid;
 		},
 
 		serializeForm: function() {
diff --git a/src/mm-form/mm-form.scss b/src/mm-form/mm-form.scss
index a5cab165..7d090973 100644
--- a/src/mm-form/mm-form.scss
+++ b/src/mm-form/mm-form.scss
@@ -18,7 +18,6 @@
 
 :host ::content mm-form-message {
 	margin-top: 10px;
-	display: none;
 }
 
 :host ::content mm-radio label {
@@ -33,4 +32,4 @@ mm-footer {
 	position: fixed;
 	bottom: 0;
 	right: 0;
-}
+}
\ No newline at end of file
diff --git a/src/mm-input/mm-input.js b/src/mm-input/mm-input.js
index f50e1c68..fad6de38 100644
--- a/src/mm-input/mm-input.js
+++ b/src/mm-input/mm-input.js
@@ -128,7 +128,7 @@
 		}, 
 		
 		_valueChanged: function(newVal, oldVal) {
-			if (newVal && newVal.length > 0) {
+			if (newVal && String(newVal).length > 0) {
 				this._clearVisible = this.clear;
 			} else {
 				this._clearVisible = false;
diff --git a/src/shared/behaviors/formable.html b/src/shared/behaviors/formable.html
index f947ea6f..8b7fea07 100644
--- a/src/shared/behaviors/formable.html
+++ b/src/shared/behaviors/formable.html
@@ -9,13 +9,15 @@
 	
 	scope.Formable = {
 
-		properties: {
-			value: {
-				type: Object,
-				notify: true,
-				observer: "_valueChanged"
-			}
-		},
+		// TODO: This causes issues with the mm-input
+		// TODO: DO WE EVEN NEED FORMABLE!?
+		// properties: {
+		// 	value: {
+		// 		type: Object,
+		// 		notify: true,
+		// 		observer: "_valueChanged"
+		// 	}
+		// },
 
 		_valueChanged: function(newVal, oldVal) {
 			if (newVal) {
diff --git a/src/shared/js/validator.html b/src/shared/js/validator.html
index 3427cd8c..730c62ba 100644
--- a/src/shared/js/validator.html
+++ b/src/shared/js/validator.html
@@ -1,15 +1,36 @@
 <script src="../../../bower_components/validator-js/validator.min.js"/></script>
 <script type="text/javascript">
-	validator.extend('isWhitespace', function (str) {
-		return /^\s+$/.test(str);
-	});
-	validator.extend('isChecked', function (input) {
-		return input.toString() === 'true' || input === true;
-	});
-	validator.extend('isEmpty', function (str) {
-		return str && str.length > 0;
-	});
-	validator.extend('isBlank', function (str) {
-		return str.trim().length > 0;
-	});
+(function (scope) {
+	
+	// default rules for common cases:
+	scope.Validator = {
+		rules: {
+			email: function(i) {
+				return validator.isEmail(i);
+			},
+			alpha: function(i) {
+				return validation.isAlpha(i);
+			},
+			int: function(i) {
+				return validator.isInt(i); 
+			},
+			decimal: function(i) {
+				return validator.isDecimal(i);
+			},
+			whitespace: function(i) {
+				return /^\s+$/.test(str);
+			},
+			checked: function(i) {
+				return i.toString() === 'true' || i === true;
+			},
+			empty: function(i) {
+				return i && i.length > 0;
+			},
+			blank: function(i) {
+				return i.trim().length > 0;
+			}
+		}
+	};
+
+})(window.StrandLib = window.StrandLib || {}); 
 </script>
\ No newline at end of file