Skip to content

Commit cbd86e8

Browse files
anthonykoerberanthonykoerber
committed
Generate label and error messaging if attribute is provided
1 parent 7bce45c commit cbd86e8

4 files changed

Lines changed: 95 additions & 42 deletions

File tree

‎src/mm-form/index.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<link rel="import" href="../mm-dropdown/mm-dropdown.html" />
77
<link rel="import" href="../mm-input/mm-input.html" />
88
<link rel="import" href="../mm-inline-box/mm-inline-box.html" />
9-
<link rel="import" href="../mm-header/mm-header.html" />
9+
<!-- <link rel="import" href="../mm-header/mm-header.html" /> -->
1010
<link rel="import" href="../mm-footer/mm-footer.html" />
1111
<link rel="import" href="../mm-button/mm-button.html" />
1212
<link rel="import" href="../mm-button/mm-button.html" />
@@ -57,7 +57,7 @@
5757
<!-- <mm-header size="medium">Type a Number</mm-header> -->
5858
<mm-input
5959
fitparent
60-
form-id="input"
60+
name="input"
6161
validation="int|empty"
6262
placeholder="Type a Number"
6363
label="Type a Number"
@@ -72,7 +72,7 @@
7272
<!-- <mm-header size="medium">Select an Item</mm-header> -->
7373
<mm-dropdown
7474
fitparent
75-
form-id="dropdown"
75+
name="dropdown"
7676
placeholder="Select an Item"
7777
validation="empty"
7878
label="Select an Item"
@@ -93,7 +93,7 @@
9393
<mm-group
9494
fitparent
9595
unresolved
96-
form-id="radio"
96+
name="radio"
9797
placeholder="Select an Item"
9898
validation="empty"
9999
label="Select a Color"

‎src/mm-form/mm-form.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
<link rel="import" href="../mm-footer/mm-footer.html"/>
1212
<link rel="import" href="../mm-button/mm-button.html"/>
1313
<link rel="import" href="../mm-action/mm-action.html"/>
14+
<link rel="import" href="../mm-header/mm-header.html" />
1415
<link rel="import" href="../mm-form-message/mm-form-message.html" />
1516

1617
<dom-module id="mm-form">

‎src/mm-form/mm-form.js‎

Lines changed: 79 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,8 @@
2626
reflectToAttribute: true
2727
},
2828
formItems: {
29-
type: Array
29+
type: Object,
30+
value: function() { return {}; }
3031
},
3132
formData: {
3233
type: Object,
@@ -105,14 +106,16 @@
105106
}
106107
},
107108

109+
_initialFormData: {},
110+
108111
// *******************************
109112
// Form Data:
110113
// {
111114
// key: { // object.getAttribute('form-id')
112115
// field: object, // the field element
113116
// value: object/string, // value of the field
114117
// validation: string, // i.e.: 'int|empty'
115-
// errorMessage: object // the error message element i.e: Polymer.dom(document)querySelector(field.getAttribute('error-message'));
118+
// errorMsg: object // the error message element i.e: Polymer.dom(document)querySelector(field.getAttribute('error-message'));
116119
// },
117120
// ...
118121
// }
@@ -123,22 +126,55 @@
123126
// TODO: consider effective children apis once we get to v1.2.3
124127
// https://www.polymer-project.org/1.0/docs/devguide/local-dom.html#effective-children
125128
this.async(function() {
126-
this.formItems = Polymer.dom(this).querySelectorAll('[form-id]');
127-
this.formItems.forEach(function(item) {
128-
var key = item.getAttribute('form-id'),
129-
field = item,
130-
value = item.value,
131-
validation = item.getAttribute('validation'),
132-
errorMessage = Polymer.dom(this).querySelector(item.getAttribute('error-message'));
129+
var formFields = Polymer.dom(this).querySelectorAll('[name]');
130+
131+
formFields.forEach(function(item) {
132+
var key = item.getAttribute('name'),
133+
field = item,
134+
label = item.getAttribute('label'),
135+
value = item.value,
136+
validation = item.getAttribute('validation'),
137+
errorMsg = item.getAttribute('error-message'),
138+
errorMsgEle = null,
139+
fieldHeaderEle = null;
133140

134-
this.formData[key] = {
135-
'field': field,
136-
'value': value,
137-
'validation': validation,
138-
'errorMessage': errorMessage
141+
// create the label and error message if necessary
142+
if (errorMsg) {
143+
var parentEle = Polymer.dom(item).parentNode;
144+
145+
errorMsgEle = new Strand.FormMessage();
146+
errorMsgEle.message = errorMsg;
147+
errorMsgEle.type = 'error';
148+
Polymer.dom(parentEle).appendChild(errorMsgEle);
149+
}
150+
151+
if (label) {
152+
var parentEle = Polymer.dom(item).parentNode,
153+
headerTxt = document.createTextNode(label);
154+
155+
fieldHeaderEle = new Strand.Header();
156+
fieldHeaderEle.size = 'medium';
157+
Polymer.dom(fieldHeaderEle).appendChild(headerTxt);
158+
Polymer.dom(parentEle).insertBefore(fieldHeaderEle, field);
159+
}
160+
161+
// store the form data, hold on to the initial settings
162+
// for cross reference diff later
163+
this.formData[key] = this._initialFormData[key] = value;
164+
165+
// store the form items and related data/elements
166+
this.formItems[key] = {
167+
'field' : field,
168+
'validation' : validation,
169+
'errorMsg' : errorMsg,
170+
'errorMsgEle' : errorMsgEle,
171+
'fieldHeaderEle' : fieldHeaderEle
139172
};
173+
140174
}.bind(this));
141175
console.log("this.formData: ", this.formData);
176+
console.log("this._initialFormData: ", this._initialFormData);
177+
console.log("this.formItems: ", this.formItems);
142178
});
143179
},
144180

@@ -162,11 +198,11 @@
162198
// *******************************
163199
// form validation
164200
// validate per field:
165-
_validateField: function(field) {
166-
// construct the test set based on pipes(?):
167-
var testSet = field.validation.replace(/\s/g, '').split("|")
168-
result = result = testSet.map(function(item) {
169-
return this.rules[item](field.value);
201+
_validateField: function(validation, value) {
202+
// construct the test set based on pipes:
203+
var testSet = validation.replace(/\s/g, '').split("|"),
204+
result = testSet.map(function(item) {
205+
return this.rules[item](value);
170206
}, this).filter(function(item) {
171207
return item === true;
172208
});
@@ -180,37 +216,48 @@
180216

181217
// UI validation pass:
182218
// console.log('submitForm');
183-
this.formItems.forEach(function(item){
184-
var key = item.getAttribute('form-id'),
185-
value = item.value,
186-
dataItem = this.formData[key],
219+
for (var key in this.formData) {
220+
var item = this.formItems[key]
221+
value = item.field.value,
222+
validation = item.validation,
187223
isValid = false;
188224

225+
// set the form data:
226+
this.formData[key] = value;
227+
189228
// validate UI:
190-
dataItem.value = value;
191-
isValid = this._validateField(dataItem);
229+
isValid = this._validateField(validation, value);
192230

193231
// track invalid & valid fields
194232
if (!isValid) {
195233
invalid.push(key);
196-
dataItem.errorMessage.style.display = 'block';
234+
item.errorMsgEle.style.display = 'block';
197235
} else {
198236
valid.push(key);
199-
dataItem.errorMessage.style.display = 'none';
237+
item.errorMsgEle.style.display = 'none';
200238
}
201239

202240
// show error state:
203-
item.error = !isValid;
204-
205-
}.bind(this));
241+
item.field.error = !isValid;
242+
}
206243

207244
// TODO:
208245
if (invalid.length > 0) {
209-
// there were errors
210-
// show footer error
246+
this.footerType = 'error';
247+
this.footerMessage = 'This form contains errors.';
248+
this.showFooterMessage = true;
211249
} else {
250+
212251
// send the data to some endpoint
213252
// handle that response
253+
254+
// reconfigure based on the response - display more error messaging
255+
// or change the error messaging, etc - for if backend error wasn't
256+
// caught on the UI validation pass
257+
258+
this.footerType = 'success';
259+
this.footerMessage = 'This form does not contain any errors.';
260+
this.showFooterMessage = true;
214261
}
215262

216263
// TODO - footer logic in here not index:

‎src/mm-form/mm-form.scss‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -51,20 +51,25 @@
5151
position: relative;
5252
}
5353

54-
:host ::content mm-header,
55-
:host ::content mm-input,
56-
:host ::content mm-dropdown {
57-
margin-bottom: 10px;
58-
}
54+
// :host ::content mm-header,
55+
// :host ::content mm-input,
56+
// :host ::content mm-dropdown {
57+
// margin-bottom: 10px;
58+
// }
5959

60-
:host ::content mm-inline-box[type='error'] {
60+
:host ::content mm-form-message {
61+
margin-top: 10px;
6162
display: none;
6263
}
6364

6465
:host ::content mm-radio label {
6566
line-height: 29px;
6667
}
6768

69+
:host ::content mm-header[size=medium] {
70+
margin-bottom: 10px;
71+
}
72+
6873
// @include flexGrid(4, 20px, 10px, 20px, 10px, 0px, 5px, 5px, 0px);
6974
@include flexGrid();
7075

0 commit comments

Comments
 (0)