Skip to content

Commit

Permalink
Generate label and error messaging if attribute is provided
Browse files Browse the repository at this point in the history
  • Loading branch information
@anthonykoerber
anthonykoerber committed Mar 2, 2016
1 parent 7bce45c commit cbd86e8
Show file tree
Hide file tree
Showing 4 changed files with 95 additions and 42 deletions.
8 changes: 4 additions & 4 deletions src/mm-form/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<link rel="import" href="../mm-dropdown/mm-dropdown.html" />
<link rel="import" href="../mm-input/mm-input.html" />
<link rel="import" href="../mm-inline-box/mm-inline-box.html" />
<link rel="import" href="../mm-header/mm-header.html" />
<!-- <link rel="import" href="../mm-header/mm-header.html" /> -->
<link rel="import" href="../mm-footer/mm-footer.html" />
<link rel="import" href="../mm-button/mm-button.html" />
<link rel="import" href="../mm-button/mm-button.html" />
Expand Down Expand Up @@ -57,7 +57,7 @@
<!-- <mm-header size="medium">Type a Number</mm-header> -->
<mm-input
fitparent
form-id="input"
name="input"
validation="int|empty"
placeholder="Type a Number"
label="Type a Number"
Expand All @@ -72,7 +72,7 @@
<!-- <mm-header size="medium">Select an Item</mm-header> -->
<mm-dropdown
fitparent
form-id="dropdown"
name="dropdown"
placeholder="Select an Item"
validation="empty"
label="Select an Item"
Expand All @@ -93,7 +93,7 @@
<mm-group
fitparent
unresolved
form-id="radio"
name="radio"
placeholder="Select an Item"
validation="empty"
label="Select a Color"
Expand Down
1 change: 1 addition & 0 deletions src/mm-form/mm-form.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
<link rel="import" href="../mm-footer/mm-footer.html"/>
<link rel="import" href="../mm-button/mm-button.html"/>
<link rel="import" href="../mm-action/mm-action.html"/>
<link rel="import" href="../mm-header/mm-header.html" />
<link rel="import" href="../mm-form-message/mm-form-message.html" />

<dom-module id="mm-form">
Expand Down
111 changes: 79 additions & 32 deletions src/mm-form/mm-form.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,8 @@
reflectToAttribute: true
},
formItems: {
type: Array
type: Object,
value: function() { return {}; }
},
formData: {
type: Object,
Expand Down Expand Up @@ -105,14 +106,16 @@
}
},

_initialFormData: {},

// *******************************
// Form Data:
// {
// key: { // object.getAttribute('form-id')
// field: object, // the field element
// value: object/string, // value of the field
// validation: string, // i.e.: 'int|empty'
// errorMessage: object // the error message element i.e: Polymer.dom(document)querySelector(field.getAttribute('error-message'));
// errorMsg: object // the error message element i.e: Polymer.dom(document)querySelector(field.getAttribute('error-message'));
// },
// ...
// }
Expand All @@ -123,22 +126,55 @@
// TODO: consider effective children apis once we get to v1.2.3
// https://www.polymer-project.org/1.0/docs/devguide/local-dom.html#effective-children
this.async(function() {
this.formItems = Polymer.dom(this).querySelectorAll('[form-id]');
this.formItems.forEach(function(item) {
var key = item.getAttribute('form-id'),
field = item,
value = item.value,
validation = item.getAttribute('validation'),
errorMessage = Polymer.dom(this).querySelector(item.getAttribute('error-message'));
var formFields = Polymer.dom(this).querySelectorAll('[name]');

formFields.forEach(function(item) {
var key = item.getAttribute('name'),
field = item,
label = item.getAttribute('label'),
value = item.value,
validation = item.getAttribute('validation'),
errorMsg = item.getAttribute('error-message'),
errorMsgEle = null,
fieldHeaderEle = null;

this.formData[key] = {
'field': field,
'value': value,
'validation': validation,
'errorMessage': errorMessage
// create the label and error message if necessary
if (errorMsg) {
var parentEle = Polymer.dom(item).parentNode;

errorMsgEle = new Strand.FormMessage();
errorMsgEle.message = errorMsg;
errorMsgEle.type = 'error';
Polymer.dom(parentEle).appendChild(errorMsgEle);
}

if (label) {
var parentEle = Polymer.dom(item).parentNode,
headerTxt = document.createTextNode(label);

fieldHeaderEle = new Strand.Header();
fieldHeaderEle.size = 'medium';
Polymer.dom(fieldHeaderEle).appendChild(headerTxt);
Polymer.dom(parentEle).insertBefore(fieldHeaderEle, field);
}

// store the form data, hold on to the initial settings
// for cross reference diff later
this.formData[key] = this._initialFormData[key] = value;

// store the form items and related data/elements
this.formItems[key] = {
'field' : field,
'validation' : validation,
'errorMsg' : errorMsg,
'errorMsgEle' : errorMsgEle,
'fieldHeaderEle' : fieldHeaderEle
};

}.bind(this));
console.log("this.formData: ", this.formData);
console.log("this._initialFormData: ", this._initialFormData);
console.log("this.formItems: ", this.formItems);
});
},

Expand All @@ -162,11 +198,11 @@
// *******************************
// form validation
// validate per field:
_validateField: function(field) {
// construct the test set based on pipes(?):
var testSet = field.validation.replace(/\s/g, '').split("|")
result = result = testSet.map(function(item) {
return this.rules[item](field.value);
_validateField: function(validation, value) {
// construct the test set based on pipes:
var testSet = validation.replace(/\s/g, '').split("|"),
result = testSet.map(function(item) {
return this.rules[item](value);
}, this).filter(function(item) {
return item === true;
});
Expand All @@ -180,37 +216,48 @@

// UI validation pass:
// console.log('submitForm');
this.formItems.forEach(function(item){
var key = item.getAttribute('form-id'),
value = item.value,
dataItem = this.formData[key],
for (var key in this.formData) {
var item = this.formItems[key]
value = item.field.value,
validation = item.validation,
isValid = false;

// set the form data:
this.formData[key] = value;

// validate UI:
dataItem.value = value;
isValid = this._validateField(dataItem);
isValid = this._validateField(validation, value);

// track invalid & valid fields
if (!isValid) {
invalid.push(key);
dataItem.errorMessage.style.display = 'block';
item.errorMsgEle.style.display = 'block';
} else {
valid.push(key);
dataItem.errorMessage.style.display = 'none';
item.errorMsgEle.style.display = 'none';
}

// show error state:
item.error = !isValid;

}.bind(this));
item.field.error = !isValid;
}

// TODO:
if (invalid.length > 0) {
// there were errors
// show footer error
this.footerType = 'error';
this.footerMessage = 'This form contains errors.';
this.showFooterMessage = true;
} else {

// send the data to some endpoint
// handle that response

// reconfigure based on the response - display more error messaging
// or change the error messaging, etc - for if backend error wasn't
// caught on the UI validation pass

this.footerType = 'success';
this.footerMessage = 'This form does not contain any errors.';
this.showFooterMessage = true;
}

// TODO - footer logic in here not index:
Expand Down
17 changes: 11 additions & 6 deletions src/mm-form/mm-form.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,20 +51,25 @@
position: relative;
}

:host ::content mm-header,
:host ::content mm-input,
:host ::content mm-dropdown {
margin-bottom: 10px;
}
// :host ::content mm-header,
// :host ::content mm-input,
// :host ::content mm-dropdown {
// margin-bottom: 10px;
// }

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

:host ::content mm-radio label {
line-height: 29px;
}

:host ::content mm-header[size=medium] {
margin-bottom: 10px;
}

// @include flexGrid(4, 20px, 10px, 20px, 10px, 0px, 5px, 5px, 0px);
@include flexGrid();

Expand Down

0 comments on commit cbd86e8

Please sign in to comment.