Make validation more sensible

MediaMath · Mar 2, 2016 · 4daeda0 · 4daeda0
1 parent 5c643f1
commit 4daeda0
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 16 deletions.
diff --git a/src/mm-repeater/index.html b/src/mm-repeater/index.html
@@ -88,14 +88,11 @@
 				float: left;
 			}
 
-			#container {
-				max-width: 680px !important;
-			}
 		</style>
 	</head>
 	<body>
-		<div id='container'>
-			<!-- <mm-repeater id="repeater">
+		<div id='container' class="col c4">
+			<mm-repeater id="repeater">
 				<template preserve-content>
 					<mm-input name="name"></mm-input>
 					<mm-dropdown name="firstOption">
@@ -110,11 +107,11 @@
 						<mm-radio><label>Test 3</label></mm-radio>
 					</mm-group>
 				</template>
-			</mm-repeater> -->
+			</mm-repeater>
 
-			<hr>
+			<hr style="margin-bottom: 30px;">
 
-		<h3>Prepopulated</h3>
+		<mm-header>Prepopulated</mm-header>
 		<mm-repeater id="withData">
 			<template preserve-content>
 				<mm-input name="name" validation="alpha"></mm-input>
@@ -131,15 +128,21 @@ <h3>Prepopulated</h3>
 				</mm-group>
 			</template>
 		</mm-repeater>
-		<mm-button id="validateBtn"><label>Validate!</label></mm-button>
+		<mm-button style="margin: 10px 0;" id="validateBtn"><label>Validate!</label></mm-button>
 		</div>
 
 		<script>
 			var data = [
 				{
 					name: "John",
 					firstOption: "Test Item 2",
-					secondOption: "Test 1"
+					secondOption: "Test 1",
+					validation: function(model) {
+						console.log(arguments);
+						this.errorMessage = 'Setting error message in validation method';
+						return model.name === 'John';
+					},
+					errorMessage: "Name is not John!"
 				},
 				{
 					name: "Paul",

diff --git a/src/mm-repeater/mm-repeater.html b/src/mm-repeater/mm-repeater.html
@@ -12,6 +12,7 @@
 <link rel="import" href="../mm-action/mm-action.html"/>
 <link rel="import" href="../mm-box/mm-box.html"/>
 <link rel="import" href="../mm-icon/mm-icon.html"/>
+<link rel="import" href="../mm-inline-box/mm-inline-box.html"/>
 
 <dom-module id="mm-repeater">
 	<link rel="import" type="css" href="mm-repeater.css"/>
@@ -24,6 +25,11 @@
 					<mm-icon type="delete" on-tap="_removeRow" height="12" width="12"></mm-icon>
 				</mm-box>
 			</mm-box>
+			<template is="dom-if" if="{{item.error}}">
+				<mm-inline-box type="error">
+					{{item.errorMessage}}
+				</mm-inline-box>
+			</template>
 		</template>
 	</template>
 </dom-module>

diff --git a/src/mm-repeater/mm-repeater.js b/src/mm-repeater/mm-repeater.js
@@ -30,8 +30,7 @@
 
 		behaviors: [
 			StrandTraits.Refable,
-			StrandTraits.Resolvable,
-			StrandTraits.Validatable
+			StrandTraits.Resolvable
 		],
 
 		get value() {
@@ -99,8 +98,14 @@
 				if(typeof item.validation === 'function') {
 					// Custom validation provided: call validation, passing name:value pairs as arguments
 					var elems = item._ref.querySelectorAll('[name]'),
-						rowData = Object.keys(elems).map(function(key) { return {name: elems[key].name, value: elems[key].value }; });
-					valid = item.validation.apply(rowData);
+						rowData = new Object();
+						Object.keys(elems).forEach(
+							function(key) {
+								var elem = elems[key];
+								rowData[elem.getAttribute('name')] = elem.value;
+							}
+						);
+					valid = item.validation.call(item, rowData);
 				} else {
 					// Default validation: call validate on each form element and fold them together
 					var fields = item._ref.querySelectorAll('[validation]');
@@ -111,6 +116,7 @@
 
 				// Reflect validation to the model for error messaging
 				this.set('data.'+index+'.error', !valid);
+				this.set('data.'+index+'.errorMessage', item.errorMessage);
 
 			}, this);
 		},
@@ -120,7 +126,6 @@
 				name = target.name || target.getAttribute('name'),
 				value = target.value || target.getAttribute('value');
 
-			console.log('_updateModel triggered');
 			if(name && value) {
 				var index = this.$.repeater.indexForElement(target);
 				this.set('data.'+(index)+'.'+name, value);

diff --git a/src/mm-repeater/mm-repeater.scss b/src/mm-repeater/mm-repeater.scss
@@ -35,6 +35,6 @@ mm-icon[type="delete"] {
 
 mm-inline-box[type="error"] {
     display: block;
-    margin-bottom: 8px;
+    margin: 8px 0;
     width: 100%;
 }