|
42 | 42 | "_applyStyles(columns, spacing)" |
43 | 43 | ], |
44 | 44 |
|
| 45 | + // common validation rules |
| 46 | + rules: { |
| 47 | + email: function(i) { |
| 48 | + 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,}))$/; |
| 49 | + return regEx.test(i); |
| 50 | + }, |
| 51 | + alpha: function(i) { |
| 52 | + var regEx = /^\w+$/; |
| 53 | + return regEx.test(i); |
| 54 | + }, |
| 55 | + int: function(i) { |
| 56 | + var regEx = /^\d+$/; |
| 57 | + return regEx.test(i); |
| 58 | + }, |
| 59 | + decimal: function(i) { |
| 60 | + var regEx = /^\d*[.]\d+$/; |
| 61 | + return regEx.test(i); |
| 62 | + }, |
| 63 | + whitespace: function(i) { |
| 64 | + var regEx = /\s/; |
| 65 | + return i.length > 0 && !regEx.test(i); |
| 66 | + }, |
| 67 | + checked: function(i) { |
| 68 | + return i === true; |
| 69 | + }, |
| 70 | + empty: function(i) { |
| 71 | + return i && i.length > 0; |
| 72 | + }, |
| 73 | + blank: function(i) { |
| 74 | + return i.trim().length > 0; |
| 75 | + } |
| 76 | + }, |
| 77 | + |
| 78 | + // ******************************* |
| 79 | + // Form Data: |
| 80 | + // { |
| 81 | + // key: { // object.getAttribute('form-id') |
| 82 | + // field: object, // the field element |
| 83 | + // value: object/string, // value of the field |
| 84 | + // validation: string, // i.e.: 'int|empty' |
| 85 | + // errorMessage: object // the error message element i.e: Polymer.dom(document)querySelector(field.getAttribute('error-message')); |
| 86 | + // }, |
| 87 | + // ... |
| 88 | + // } |
| 89 | + // ******************************* |
| 90 | + |
45 | 91 | ready: function() { |
46 | 92 | // build form data object |
47 | 93 | // TODO: consider effective children apis once we get to v1.2.3 |
48 | 94 | // https://www.polymer-project.org/1.0/docs/devguide/local-dom.html#effective-children |
49 | 95 | this.async(function() { |
50 | 96 | this.formItems = Polymer.dom(this).querySelectorAll('[form-id]'); |
51 | 97 | this.formItems.forEach(function(item) { |
52 | | - this.formData[item.formId] = item.value; |
| 98 | + var key = item.getAttribute('form-id'), |
| 99 | + field = item, |
| 100 | + value = item.value, |
| 101 | + validation = item.getAttribute('validation'), |
| 102 | + errorMessage = Polymer.dom(this).querySelector(item.getAttribute('error-message')); |
| 103 | + |
| 104 | + this.formData[key] = { |
| 105 | + 'field': field, |
| 106 | + 'value': value, |
| 107 | + 'validation': validation, |
| 108 | + 'errorMessage': errorMessage |
| 109 | + }; |
53 | 110 | }.bind(this)); |
54 | 111 | console.log("this.formData: ", this.formData); |
55 | 112 | }); |
56 | 113 | }, |
57 | 114 |
|
| 115 | + // validate per field: |
| 116 | + _validateField: function(field) { |
| 117 | + // construct the test set based on pipes(?): |
| 118 | + var testSet = field.validation.replace(/\s/g, '').split("|") |
| 119 | + result = result = testSet.map(function(item) { |
| 120 | + return this.rules[item](field.value); |
| 121 | + }, this).filter(function(item) { |
| 122 | + return item === true; |
| 123 | + }); |
| 124 | + |
| 125 | + return result.length === testSet.length; |
| 126 | + }, |
| 127 | + |
58 | 128 | submitForm: function() { |
59 | 129 | var invalid = [], |
60 | 130 | valid = []; |
61 | 131 |
|
62 | 132 | // UI validation pass: |
63 | 133 | // console.log('submitForm'); |
64 | 134 | this.formItems.forEach(function(item){ |
65 | | - // update the form data object: |
66 | | - this.formData[item.formId] = item.value; |
| 135 | + var key = item.getAttribute('form-id'), |
| 136 | + value = item.value, |
| 137 | + dataItem = this.formData[key], |
| 138 | + isValid = false; |
67 | 139 |
|
68 | 140 | // validate UI: |
69 | | - var isValid = item.validate(item.value); |
| 141 | + dataItem.value = value; |
| 142 | + isValid = this._validateField(dataItem); |
70 | 143 |
|
71 | | - // track invalids |
| 144 | + // track invalid & valid fields |
72 | 145 | if (!isValid) { |
73 | | - invalid.push(item.formId); |
| 146 | + invalid.push(key); |
| 147 | + dataItem.errorMessage.style.display = 'block'; |
74 | 148 | } else { |
75 | | - valid.push(item.formId); |
| 149 | + valid.push(key); |
| 150 | + dataItem.errorMessage.style.display = 'none'; |
76 | 151 | } |
77 | 152 |
|
78 | 153 | // show error state: |
79 | 154 | item.error = !isValid; |
80 | 155 |
|
81 | | - // show target message: |
82 | | - if(item._errorTarget && !isValid) { |
83 | | - // item._errorTarget.display(); |
84 | | - item._errorTarget.style.display = 'block'; |
85 | | - } else { |
86 | | - // item._errorTarget.hide(); |
87 | | - item._errorTarget.style.display = 'none'; |
88 | | - } |
89 | 156 | }.bind(this)); |
90 | 157 |
|
| 158 | + // TODO: |
91 | 159 | if (invalid.length > 0) { |
92 | 160 | // there were errors |
93 | 161 | // show footer error |
94 | | - // console.log('invalids:', invalids); |
95 | | - this.submitMessage = 'This form contains errors'; |
96 | 162 | } else { |
97 | 163 | // send the data to some endpoint |
98 | 164 | // handle that response |
99 | 165 | } |
100 | 166 |
|
| 167 | + // TODO - footer logic in here not index: |
101 | 168 | // fire an invalid form event: |
102 | 169 | this.fire('form-submit', { |
103 | 170 | isValid: !invalid.length > 0, |
|
0 commit comments