From a997ada279592e8aa09fde1af8184b03f790355d Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Mon, 5 Feb 2018 09:57:24 -0800
Subject: [PATCH 01/30] fix(text-field): demo pages on text-field using
 foundation api to set required

---
 demos/text-field.html | 47 +++++++++++++++++++++++++------------------
 1 file changed, 27 insertions(+), 20 deletions(-)

diff --git a/demos/text-field.html b/demos/text-field.html
index 3a273d74aac..f3e99284e2a 100644
--- a/demos/text-field.html
+++ b/demos/text-field.html
@@ -139,7 +139,7 @@ <h2>Password field with validation</h2>
         <h2>Outlined Text Field</h2>
         <div id="demo-tf-outlined-wrapper">
           <div id="tf-outlined-example" class="mdc-text-field mdc-text-field--outlined" data-demo-no-auto-js>
-            <input required pattern=".{8,}" type="text" id="tf-outlined-input" class="mdc-text-field__input"
+            <input pattern=".{8,}" type="text" id="tf-outlined-input" class="mdc-text-field__input"
                    aria-controls="name-validation-message">
             <label for="tf-outlined-input" class="mdc-text-field__label">Your Name</label>
             <div class="mdc-text-field__outline">
@@ -169,6 +169,10 @@ <h2>Outlined Text Field</h2>
           <input id="outlined-dense" type="checkbox">
           <label for="outlined-dense">Dense</label>
         </div>
+        <div>
+          <input id="outlined-required" type="checkbox">
+          <label for="outlined-required">Required and must be at least 8 characters</label>
+        </div>
       </section>
 
       <section class="example" id="text-field-box-example">
@@ -382,16 +386,20 @@ <h2>Full-Width Text Field and Textarea</h2>
           tfEl.classList[evt.target.checked ? 'add' : 'remove']('mdc-text-field--dense');
           tf.layout();
         });
+        document.getElementById('outlined-required').addEventListener('change', function(evt) {
+          var checked = evt.target.checked;
+          tf.required = checked;
+        });
       });
 
       demoReady(function() {
         var tfEl = document.getElementById('tf-box-example');
-        var tf = new mdc.textField.MDCTextField(tfEl);
+        var tfBox = new mdc.textField.MDCTextField(tfEl);
         var wrapper = document.getElementById('demo-tf-box-wrapper');
         var helperText = document.getElementById('box-text-field-helper-text');
 
         document.getElementById('box-disable').addEventListener('change', function(evt) {
-          tf.disabled = evt.target.checked;
+          tfBox.disabled = evt.target.checked;
         });
 
         document.getElementById('box-rtl').addEventListener('change', function(evt) {
@@ -400,12 +408,12 @@ <h2>Full-Width Text Field and Textarea</h2>
           } else {
             wrapper.removeAttribute('dir');
           }
-          tf.layout();
+          tfBox.layout();
         });
 
         document.getElementById('box-dense').addEventListener('change', function(evt) {
           tfEl.classList[evt.target.checked ? 'add' : 'remove']('mdc-text-field--dense');
-          tf.layout();
+          tfBox.layout();
         });
 
         document.getElementById('box-alternate-colors').addEventListener('change', function (evt) {
@@ -419,7 +427,7 @@ <h2>Full-Width Text Field and Textarea</h2>
           var input = tfEl.querySelector('.mdc-text-field__input');
           var requiredHelperText = 'Must be at least 8 characters';
           var plainHelperText = 'Helper Text (possibly validation message)';
-          input.required = target.checked;
+          tfBox.required = target.checked;
           input.pattern = evt.target.checked ? '.{8,}' : '.*';
           helperText.innerHTML = target.checked ? requiredHelperText : plainHelperText;
         });
@@ -512,10 +520,14 @@ <h2>Full-Width Text Field and Textarea</h2>
         });
 
         document.getElementById('required-leading-trailing').addEventListener('change', function(evt) {
+          var checked = evt.target.checked;
+          tfBoxLeading.required = checked;
+          tfBoxTrailing.required = checked;
+          tfOutlinedLeading.required = checked;
+          tfOutlinedTrailing.required = checked;
           [].slice.call(tfInputs).forEach(function(input) {
-                input.required = evt.target.checked;
-                input.pattern = evt.target.checked ? '.{8,}' : '.*';
-              });
+            input.pattern = evt.target.checked ? '.{8,}' : '.*';
+          });
         });
 
         document.getElementById('leading-trailing-alternate-colors').addEventListener('change', function(evt) {
@@ -558,7 +570,7 @@ <h2>Full-Width Text Field and Textarea</h2>
         });
         document.getElementById('required').addEventListener('change', function(evt) {
           var target = evt.target;
-          tfRoot.querySelector('.mdc-text-field__input').required = target.checked;
+          tf.required = target.checked;
         });
         document.getElementById('alternate-colors').addEventListener('change', function (evt) {
           var target = evt.target;
@@ -608,11 +620,8 @@ <h2>Full-Width Text Field and Textarea</h2>
         });
 
         document.getElementById('textarea-required').addEventListener('change', function(evt) {
-          var target = evt.target;
-          [].slice.call(tfRoot.querySelectorAll('.mdc-text-field__input'))
-              .forEach(function(input) {
-                input.required = target.checked;
-              })
+          var checked = evt.target.checked;
+          tf.required = checked;
         });
       });
 
@@ -638,11 +647,9 @@ <h2>Full-Width Text Field and Textarea</h2>
         });
 
         document.getElementById('fullwidth-required').addEventListener('change', function(evt) {
-          var target = evt.target;
-          [].slice.call(section.querySelectorAll('.mdc-text-field__input'))
-              .forEach(function(input) {
-                input.required = target.checked;
-              })
+          var checked = evt.target.checked;
+          tf.required = checked;
+          tfMulti.required = checked;
         });
 
         document.getElementById('fullwidth-alternate-colors').addEventListener('change', function (evt) {

From 2a92713edf91db224c84323fc813ec1938bd735b Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Mon, 5 Feb 2018 10:52:42 -0800
Subject: [PATCH 02/30] fix(text-field): removed check validity from
 setRequired in foundation

---
 packages/mdc-textfield/foundation.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/mdc-textfield/foundation.js b/packages/mdc-textfield/foundation.js
index fb76510e23d..25bc6d7123d 100644
--- a/packages/mdc-textfield/foundation.js
+++ b/packages/mdc-textfield/foundation.js
@@ -301,9 +301,6 @@ class MDCTextFieldFoundation extends MDCFoundation {
    */
   setRequired(isRequired) {
     this.getNativeInput_().required = isRequired;
-    // Addition of the asterisk is automatic based on CSS, but validity checking
-    // needs to be manually run.
-    this.styleValidity_(this.isValid());
   }
 
   /**

From 3bc98ee60b0a34669646763d89ebd036ccd2d50c Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Mon, 5 Feb 2018 11:40:42 -0800
Subject: [PATCH 03/30] fix(text-field): fixed foundation test #setRequired

---
 test/unit/mdc-textfield/foundation.test.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/test/unit/mdc-textfield/foundation.test.js b/test/unit/mdc-textfield/foundation.test.js
index 33cee653ced..78ec1c03681 100644
--- a/test/unit/mdc-textfield/foundation.test.js
+++ b/test/unit/mdc-textfield/foundation.test.js
@@ -204,19 +204,15 @@ test('#setValid updates classes', () => {
 
 test('#setRequired updates CSS classes', () => {
   // Native validity checking does not apply in unittests, so manually mark as valid or invalid.
-  const {foundation, mockAdapter, nativeInput, helperText} =
+  const {foundation, mockAdapter, nativeInput} =
     setupValueTest('', /* isValid */ false);
 
   foundation.setRequired(true);
   assert.isOk(foundation.isRequired());
-  td.verify(mockAdapter.addClass(cssClasses.INVALID));
-  td.verify(helperText.setValidity(false));
 
   nativeInput.validity.valid = true;
   foundation.setRequired(false);
   assert.isNotOk(foundation.isRequired());
-  td.verify(mockAdapter.removeClass(cssClasses.INVALID));
-  td.verify(helperText.setValidity(true));
 
   // None of these is affected by setRequired.
   td.verify(mockAdapter.addClass(cssClasses.FOCUSED), {times: 0});

From 09932f8ff0d7557dfc7d2757fcd6e59c5a0b25aa Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Mon, 5 Feb 2018 11:50:02 -0800
Subject: [PATCH 04/30] fix(text-field): undo demo var rename

---
 demos/text-field.html | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/demos/text-field.html b/demos/text-field.html
index f3e99284e2a..0f6ca3a2f7f 100644
--- a/demos/text-field.html
+++ b/demos/text-field.html
@@ -394,12 +394,12 @@ <h2>Full-Width Text Field and Textarea</h2>
 
       demoReady(function() {
         var tfEl = document.getElementById('tf-box-example');
-        var tfBox = new mdc.textField.MDCTextField(tfEl);
+        var tf = new mdc.textField.MDCTextField(tfEl);
         var wrapper = document.getElementById('demo-tf-box-wrapper');
         var helperText = document.getElementById('box-text-field-helper-text');
 
         document.getElementById('box-disable').addEventListener('change', function(evt) {
-          tfBox.disabled = evt.target.checked;
+          tf.disabled = evt.target.checked;
         });
 
         document.getElementById('box-rtl').addEventListener('change', function(evt) {
@@ -408,12 +408,12 @@ <h2>Full-Width Text Field and Textarea</h2>
           } else {
             wrapper.removeAttribute('dir');
           }
-          tfBox.layout();
+          tf.layout();
         });
 
         document.getElementById('box-dense').addEventListener('change', function(evt) {
           tfEl.classList[evt.target.checked ? 'add' : 'remove']('mdc-text-field--dense');
-          tfBox.layout();
+          tf.layout();
         });
 
         document.getElementById('box-alternate-colors').addEventListener('change', function (evt) {
@@ -427,7 +427,7 @@ <h2>Full-Width Text Field and Textarea</h2>
           var input = tfEl.querySelector('.mdc-text-field__input');
           var requiredHelperText = 'Must be at least 8 characters';
           var plainHelperText = 'Helper Text (possibly validation message)';
-          tfBox.required = target.checked;
+          tf.required = target.checked;
           input.pattern = evt.target.checked ? '.{8,}' : '.*';
           helperText.innerHTML = target.checked ? requiredHelperText : plainHelperText;
         });

From 10acedddfd33fb15ed64e6a55b4b101ae6182894 Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Fri, 9 Feb 2018 16:08:59 -0800
Subject: [PATCH 05/30] fix(text-field): added set/get/remove
 validationAttribute

BREAKING CHANGE: removed setRequired and isRequired from foundation. Removed get/set required from component.
---
 demos/text-field.html                         | 112 ++++++++++++++----
 packages/mdc-textfield/foundation.js          |  27 ++++-
 packages/mdc-textfield/index.js               |  21 +++-
 test/unit/mdc-textfield/foundation.test.js    |  38 ++++--
 .../unit/mdc-textfield/mdc-text-field.test.js |  20 +++-
 5 files changed, 169 insertions(+), 49 deletions(-)

diff --git a/demos/text-field.html b/demos/text-field.html
index 0f6ca3a2f7f..4e29b98c140 100644
--- a/demos/text-field.html
+++ b/demos/text-field.html
@@ -139,7 +139,7 @@ <h2>Password field with validation</h2>
         <h2>Outlined Text Field</h2>
         <div id="demo-tf-outlined-wrapper">
           <div id="tf-outlined-example" class="mdc-text-field mdc-text-field--outlined" data-demo-no-auto-js>
-            <input pattern=".{8,}" type="text" id="tf-outlined-input" class="mdc-text-field__input"
+            <input type="text" id="tf-outlined-input" class="mdc-text-field__input"
                    aria-controls="name-validation-message">
             <label for="tf-outlined-input" class="mdc-text-field__label">Your Name</label>
             <div class="mdc-text-field__outline">
@@ -171,7 +171,11 @@ <h2>Outlined Text Field</h2>
         </div>
         <div>
           <input id="outlined-required" type="checkbox">
-          <label for="outlined-required">Required and must be at least 8 characters</label>
+          <label for="outlined-required">Required</label>
+        </div>
+        <div>
+          <input id="outlined-pattern" type="checkbox">
+          <label for="outlined-pattern">Must be at least 8 characters</label>
         </div>
       </section>
 
@@ -207,7 +211,11 @@ <h2>Text Field box</h2>
         </div>
         <div>
           <input id="box-required" type="checkbox">
-          <label for="box-required">Required and must be at least 8 characters</label>
+          <label for="box-required">Required</label>
+        </div>
+        <div>
+          <input id="box-pattern" type="checkbox">
+          <label for="box-pattern">Must be at least 8 characters</label>
         </div>
         <div>
           <input id="box-use-helper-text" type="checkbox">
@@ -289,7 +297,11 @@ <h2>Text Field - Leading/Trailing icons</h2>
         </div>
         <div>
           <input id="required-leading-trailing" type="checkbox">
-          <label for="required-leading-trailing">Required and must be at least 8 characters</label>
+          <label for="required-leading-trailing">Required</label>
+        </div>
+        <div>
+          <input id="pattern-leading-trailing" type="checkbox">
+          <label for="pattern-leading-trailing">Must be at least 8 characters</label>
         </div>
       </section>
 
@@ -388,7 +400,19 @@ <h2>Full-Width Text Field and Textarea</h2>
         });
         document.getElementById('outlined-required').addEventListener('change', function(evt) {
           var checked = evt.target.checked;
-          tf.required = checked;
+          if (checked) {
+            tf.setValidationAttribute('required', 'true');
+          } else {
+            tf.removeValidationAttribute('required');
+          }
+        });
+        document.getElementById('outlined-pattern').addEventListener('change', function(evt) {
+          var checked = evt.target.checked;
+          if (checked) {
+            tf.setValidationAttribute('minlength', 8);
+          } else {
+            tf.removeValidationAttribute('minlength');
+          }
         });
       });
 
@@ -423,13 +447,23 @@ <h2>Full-Width Text Field and Textarea</h2>
         });
 
         document.getElementById('box-required').addEventListener('change', function(evt) {
-          var target = evt.target;
-          var input = tfEl.querySelector('.mdc-text-field__input');
+          var checked = evt.target.checked;
+          if (checked) {
+            tf.setValidationAttribute('required', 'true');
+          } else {
+            tf.removeValidationAttribute('required');
+          }
+        });
+        document.getElementById('box-pattern').addEventListener('change', function(evt) {
+          var checked = evt.target.checked;
           var requiredHelperText = 'Must be at least 8 characters';
           var plainHelperText = 'Helper Text (possibly validation message)';
-          tf.required = target.checked;
-          input.pattern = evt.target.checked ? '.{8,}' : '.*';
-          helperText.innerHTML = target.checked ? requiredHelperText : plainHelperText;
+          if (checked) {
+            tf.setValidationAttribute('pattern', '.{8,}');
+          } else {
+            tf.setValidationAttribute('pattern', '.*');
+          }
+          helperText.innerHTML = checked ? requiredHelperText : plainHelperText;
         });
 
         document.getElementById('box-use-helper-text').addEventListener('change', function(evt) {
@@ -521,13 +555,32 @@ <h2>Full-Width Text Field and Textarea</h2>
 
         document.getElementById('required-leading-trailing').addEventListener('change', function(evt) {
           var checked = evt.target.checked;
-          tfBoxLeading.required = checked;
-          tfBoxTrailing.required = checked;
-          tfOutlinedLeading.required = checked;
-          tfOutlinedTrailing.required = checked;
-          [].slice.call(tfInputs).forEach(function(input) {
-            input.pattern = evt.target.checked ? '.{8,}' : '.*';
-          });
+          if (checked) {
+            tfBoxLeading.setValidationAttribute('required', 'true');
+            tfBoxTrailing.setValidationAttribute('required', 'true');
+            tfOutlinedLeading.setValidationAttribute('required', 'true');
+            tfOutlinedTrailing.setValidationAttribute('required', 'true');
+          } else {
+            tfBoxLeading.removeValidationAttribute('required');
+            tfBoxTrailing.removeValidationAttribute('required');
+            tfOutlinedLeading.removeValidationAttribute('required');
+            tfOutlinedTrailing.removeValidationAttribute('required');
+          }
+        });
+
+        document.getElementById('pattern-leading-trailing').addEventListener('change', function(evt) {
+          var checked = evt.target.checked;
+          if (checked) {
+            tfBoxLeading.setValidationAttribute('pattern', '.{8,}');
+            tfBoxTrailing.setValidationAttribute('pattern', '.{8,}');
+            tfOutlinedLeading.setValidationAttribute('pattern', '.{8,}');
+            tfOutlinedTrailing.setValidationAttribute('pattern', '.{8,}');
+          } else {
+            tfBoxLeading.setValidationAttribute('pattern', '.*');
+            tfBoxTrailing.setValidationAttribute('pattern', '.*');
+            tfOutlinedLeading.setValidationAttribute('pattern', '.*');
+            tfOutlinedTrailing.setValidationAttribute('pattern', '.*');
+          }
         });
 
         document.getElementById('leading-trailing-alternate-colors').addEventListener('change', function(evt) {
@@ -569,8 +622,12 @@ <h2>Full-Width Text Field and Textarea</h2>
           tfRoot.classList[target.checked ? 'add' : 'remove']('mdc-text-field--dense');
         });
         document.getElementById('required').addEventListener('change', function(evt) {
-          var target = evt.target;
-          tf.required = target.checked;
+          var checked = evt.target.checked;
+          if (checked) {
+            tf.setValidationAttribute('required', 'true');
+          } else {
+            tf.removeValidationAttribute('required');
+          }
         });
         document.getElementById('alternate-colors').addEventListener('change', function (evt) {
           var target = evt.target;
@@ -618,10 +675,13 @@ <h2>Full-Width Text Field and Textarea</h2>
           var target = evt.target;
           tfRoot.classList[target.checked ? 'add' : 'remove']('demo-textarea');
         });
-
         document.getElementById('textarea-required').addEventListener('change', function(evt) {
           var checked = evt.target.checked;
-          tf.required = checked;
+          if (checked) {
+            tf.setValidationAttribute('required', 'true');
+          } else {
+            tf.removeValidationAttribute('required');
+          }
         });
       });
 
@@ -645,11 +705,15 @@ <h2>Full-Width Text Field and Textarea</h2>
             el.classList[target.checked ? 'add' : 'remove']('mdc-text-field--dense');
           });
         });
-
         document.getElementById('fullwidth-required').addEventListener('change', function(evt) {
           var checked = evt.target.checked;
-          tf.required = checked;
-          tfMulti.required = checked;
+          if (checked) {
+            tf.setValidationAttribute('required', 'true');
+            tfMulti.setValidationAttribute('required', 'true');
+          } else {
+            tf.removeValidationAttribute('required');
+            tfMulti.removeValidationAttribute('required');
+          }
         });
 
         document.getElementById('fullwidth-alternate-colors').addEventListener('change', function (evt) {
diff --git a/packages/mdc-textfield/foundation.js b/packages/mdc-textfield/foundation.js
index 25bc6d7123d..5077774d439 100644
--- a/packages/mdc-textfield/foundation.js
+++ b/packages/mdc-textfield/foundation.js
@@ -290,17 +290,32 @@ class MDCTextFieldFoundation extends MDCFoundation {
   }
 
   /**
-   * @return {boolean} True if the Text Field is required.
+   * @return {string} the attribute value from the input element
+   * @param {string} attrName is the name of the attribute on the input element
    */
-  isRequired() {
-    return this.getNativeInput_().required;
+  getValidationAttribute(attrName) {
+    return this.getNativeInput_().getAttribute(attrName);
   }
 
   /**
-   * @param {boolean} isRequired Sets the text-field required or not.
+   * @param {string} attrName is the name of the attribute to be set
+   * @param {boolean|number|string} val is the value of attribute to be set
    */
-  setRequired(isRequired) {
-    this.getNativeInput_().required = isRequired;
+  setValidationAttribute(attrName, val) {
+    this.getNativeInput_().setAttribute(attrName, val);
+    // Setting validation to true even if input is incorrect.
+    // If developer toggles a validation property (required, minlength, etc)
+    // the user should have a chance interact with the input before it being
+    // invalid again.
+    this.styleValidity_(true);
+  }
+
+  /**
+   * @param {string} attrName is the name of the attribute to remove from input element
+   */
+  removeValidationAttribute(attrName) {
+    this.getNativeInput_().removeAttribute(attrName);
+    this.styleValidity_(true);
   }
 
   /**
diff --git a/packages/mdc-textfield/index.js b/packages/mdc-textfield/index.js
index ffd841e9861..784dc5d8a95 100644
--- a/packages/mdc-textfield/index.js
+++ b/packages/mdc-textfield/index.js
@@ -203,17 +203,26 @@ class MDCTextField extends MDCComponent {
   }
 
   /**
-   * @return {boolean} True if the Text Field is required.
+   * @return {string} the attribute value from the input element
+   * @param {string} attrName is the name of the attribute on the input element
    */
-  get required() {
-    return this.foundation_.isRequired();
+  getValidationAttribute(attrName) {
+    return this.foundation_.getValidationAttribute(attrName);
   }
 
   /**
-   * @param {boolean} required Sets the Text Field to required.
+   * @param {string} attrName is the attribute name to be set
+   * @param {boolean|number|string} val is the value of attribute to be set
    */
-  set required(required) {
-    this.foundation_.setRequired(required);
+  setValidationAttribute(attrName, val) {
+    this.foundation_.setValidationAttribute(attrName, val);
+  }
+
+  /**
+   * @param {string} attrName is the name of the attribute to remove from input element
+   */
+  removeValidationAttribute(attrName) {
+    this.foundation_.removeValidationAttribute(attrName);
   }
 
   /**
diff --git a/test/unit/mdc-textfield/foundation.test.js b/test/unit/mdc-textfield/foundation.test.js
index 78ec1c03681..a54c04748a4 100644
--- a/test/unit/mdc-textfield/foundation.test.js
+++ b/test/unit/mdc-textfield/foundation.test.js
@@ -202,25 +202,47 @@ test('#setValid updates classes', () => {
   td.verify(mockAdapter.removeClass(cssClasses.DISABLED), {times: 0});
 });
 
-test('#setRequired updates CSS classes', () => {
+test('#setValidationAttribute required to true updates CSS classes', () => {
   // Native validity checking does not apply in unittests, so manually mark as valid or invalid.
-  const {foundation, mockAdapter, nativeInput} =
+  const {foundation, mockAdapter, helperText} =
     setupValueTest('', /* isValid */ false);
 
-  foundation.setRequired(true);
-  assert.isOk(foundation.isRequired());
+  td.when(mockAdapter.getNativeInput()).thenReturn({setAttribute: () => null});
+  foundation.setValidationAttribute('required', 'true');
+  td.verify(mockAdapter.removeClass(cssClasses.INVALID));
+  td.verify(helperText.setValidity(true));
 
-  nativeInput.validity.valid = true;
-  foundation.setRequired(false);
-  assert.isNotOk(foundation.isRequired());
+  // None of these is affected by setValidationAttribute.
+  td.verify(mockAdapter.addClass(cssClasses.FOCUSED), {times: 0});
+  td.verify(mockAdapter.removeClass(cssClasses.FOCUSED), {times: 0});
+  td.verify(mockAdapter.addClass(cssClasses.DISABLED), {times: 0});
+  td.verify(mockAdapter.removeClass(cssClasses.DISABLED), {times: 0});
+});
 
-  // None of these is affected by setRequired.
+test('#removeValidationAttribute required updates CSS classes', () => {
+  const {foundation, mockAdapter, helperText} =
+    setupValueTest('', /* isValid */ false);
+
+  td.when(mockAdapter.getNativeInput()).thenReturn({removeAttribute: () => null});
+  foundation.removeValidationAttribute('required');
+  td.verify(mockAdapter.removeClass(cssClasses.INVALID));
+  td.verify(helperText.setValidity(true));
+
+  // None of these is affected by setValidationAttribute.
   td.verify(mockAdapter.addClass(cssClasses.FOCUSED), {times: 0});
   td.verify(mockAdapter.removeClass(cssClasses.FOCUSED), {times: 0});
   td.verify(mockAdapter.addClass(cssClasses.DISABLED), {times: 0});
   td.verify(mockAdapter.removeClass(cssClasses.DISABLED), {times: 0});
 });
 
+test('#getValidationAttribute required returns correct value', () => {
+  const {foundation, mockAdapter} =
+    setupValueTest('', /* isValid */ false);
+
+  td.when(mockAdapter.getNativeInput()).thenReturn({getAttribute: () => true});
+  assert.equal(foundation.getValidationAttribute('required'), true);
+});
+
 test('#setDisabled flips disabled when a native input is given', () => {
   const {foundation, mockAdapter} = setupTest();
   const nativeInput = {disabled: false};
diff --git a/test/unit/mdc-textfield/mdc-text-field.test.js b/test/unit/mdc-textfield/mdc-text-field.test.js
index c19fb5e5102..b339e94eb97 100644
--- a/test/unit/mdc-textfield/mdc-text-field.test.js
+++ b/test/unit/mdc-textfield/mdc-text-field.test.js
@@ -416,10 +416,20 @@ test('get/set valid', () => {
   td.verify(mockFoundation.setValid(true));
 });
 
-test('get/set required', () => {
+test('setValidationAttribute', () => {
   const {component, mockFoundation} = setupMockFoundationTest();
-  component.required;
-  td.verify(mockFoundation.isRequired());
-  component.required = true;
-  td.verify(mockFoundation.setRequired(true));
+  component.setValidationAttribute('required', true);
+  td.verify(mockFoundation.setValidationAttribute('required', true));
+});
+
+test('removeValidationAttribute', () => {
+  const {component, mockFoundation} = setupMockFoundationTest();
+  component.removeValidationAttribute('required');
+  td.verify(mockFoundation.removeValidationAttribute('required'));
+});
+
+test('getValidationAttribute', () => {
+  const {component, mockFoundation} = setupMockFoundationTest();
+  component.getValidationAttribute('required');
+  td.verify(mockFoundation.getValidationAttribute('required'));
 });

From 411f0bff2655e466e1a12f3823e3d1d4a30d23ef Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Fri, 9 Feb 2018 16:34:23 -0800
Subject: [PATCH 06/30] fix(text-field): update demo page code

---
 demos/text-field.html | 68 +++++++++++++++----------------------------
 1 file changed, 24 insertions(+), 44 deletions(-)

diff --git a/demos/text-field.html b/demos/text-field.html
index 4e29b98c140..44ae2aff4cc 100644
--- a/demos/text-field.html
+++ b/demos/text-field.html
@@ -149,8 +149,8 @@ <h2>Outlined Text Field</h2>
             </div>
             <div class="mdc-text-field__idle-outline"></div>
           </div>
-          <p class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg">
-            Must be at least 8 characters
+          <p class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg" id="tf-outlined-validation-msg">
+            Helper Text (possibly validation message)
           </p>
         </div>
         <div>
@@ -375,8 +375,16 @@ <h2>Full-Width Text Field and Textarea</h2>
 
     <script src="/assets/material-components-web.js" async></script>
     <script>
+      function toggleRequired(textfield, isRequired) {
+        if (isRequired) {
+          textfield.setValidationAttribute('required', 'true');
+        } else {
+          textfield.removeValidationAttribute('required');
+        }
+      }
       demoReady(function() {
         var tfEl = document.getElementById('tf-outlined-example');
+        var tfHelperText = document.getElementById('tf-outlined-validation-msg');
         var tf = new mdc.textField.MDCTextField(tfEl);
         var wrapper = document.getElementById('demo-tf-outlined-wrapper');
         document.getElementById('outlined-disable').addEventListener('change', function(evt) {
@@ -399,19 +407,18 @@ <h2>Full-Width Text Field and Textarea</h2>
           tf.layout();
         });
         document.getElementById('outlined-required').addEventListener('change', function(evt) {
-          var checked = evt.target.checked;
-          if (checked) {
-            tf.setValidationAttribute('required', 'true');
-          } else {
-            tf.removeValidationAttribute('required');
-          }
+          toggleRequired(tf, evt.target.checked);
         });
         document.getElementById('outlined-pattern').addEventListener('change', function(evt) {
           var checked = evt.target.checked;
+          var plainHelperText = 'Helper Text (possibly validation message)';
+          var requiredHelperText = 'Must be at least 8 characters';requiredHelperText
           if (checked) {
             tf.setValidationAttribute('minlength', 8);
+            tfHelperText.innerHTML = requiredHelperText;
           } else {
             tf.removeValidationAttribute('minlength');
+            tfHelperText.innerHTML = plainHelperText;
           }
         });
       });
@@ -447,12 +454,7 @@ <h2>Full-Width Text Field and Textarea</h2>
         });
 
         document.getElementById('box-required').addEventListener('change', function(evt) {
-          var checked = evt.target.checked;
-          if (checked) {
-            tf.setValidationAttribute('required', 'true');
-          } else {
-            tf.removeValidationAttribute('required');
-          }
+          toggleRequired(tf, evt.target.checked);
         });
         document.getElementById('box-pattern').addEventListener('change', function(evt) {
           var checked = evt.target.checked;
@@ -555,17 +557,10 @@ <h2>Full-Width Text Field and Textarea</h2>
 
         document.getElementById('required-leading-trailing').addEventListener('change', function(evt) {
           var checked = evt.target.checked;
-          if (checked) {
-            tfBoxLeading.setValidationAttribute('required', 'true');
-            tfBoxTrailing.setValidationAttribute('required', 'true');
-            tfOutlinedLeading.setValidationAttribute('required', 'true');
-            tfOutlinedTrailing.setValidationAttribute('required', 'true');
-          } else {
-            tfBoxLeading.removeValidationAttribute('required');
-            tfBoxTrailing.removeValidationAttribute('required');
-            tfOutlinedLeading.removeValidationAttribute('required');
-            tfOutlinedTrailing.removeValidationAttribute('required');
-          }
+          toggleRequired(tfBoxLeading, checked);
+          toggleRequired(tfBoxTrailing, checked);
+          toggleRequired(tfOutlinedLeading, checked);
+          toggleRequired(tfOutlinedTrailing, checked);
         });
 
         document.getElementById('pattern-leading-trailing').addEventListener('change', function(evt) {
@@ -622,12 +617,7 @@ <h2>Full-Width Text Field and Textarea</h2>
           tfRoot.classList[target.checked ? 'add' : 'remove']('mdc-text-field--dense');
         });
         document.getElementById('required').addEventListener('change', function(evt) {
-          var checked = evt.target.checked;
-          if (checked) {
-            tf.setValidationAttribute('required', 'true');
-          } else {
-            tf.removeValidationAttribute('required');
-          }
+          toggleRequired(tf, evt.target.checked);
         });
         document.getElementById('alternate-colors').addEventListener('change', function (evt) {
           var target = evt.target;
@@ -676,12 +666,7 @@ <h2>Full-Width Text Field and Textarea</h2>
           tfRoot.classList[target.checked ? 'add' : 'remove']('demo-textarea');
         });
         document.getElementById('textarea-required').addEventListener('change', function(evt) {
-          var checked = evt.target.checked;
-          if (checked) {
-            tf.setValidationAttribute('required', 'true');
-          } else {
-            tf.removeValidationAttribute('required');
-          }
+          toggleRequired(tf, evt.target.checked);
         });
       });
 
@@ -707,13 +692,8 @@ <h2>Full-Width Text Field and Textarea</h2>
         });
         document.getElementById('fullwidth-required').addEventListener('change', function(evt) {
           var checked = evt.target.checked;
-          if (checked) {
-            tf.setValidationAttribute('required', 'true');
-            tfMulti.setValidationAttribute('required', 'true');
-          } else {
-            tf.removeValidationAttribute('required');
-            tfMulti.removeValidationAttribute('required');
-          }
+          toggleRequired(tf, evt.target.checked);
+          toggleRequired(tfMulti, evt.target.checked);
         });
 
         document.getElementById('fullwidth-alternate-colors').addEventListener('change', function (evt) {

From a05d689fae96f5fd49f5e7d8d0e8f42934f33045 Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Fri, 9 Feb 2018 16:35:29 -0800
Subject: [PATCH 07/30] fix(text-field): fixed up demo js

---
 demos/text-field.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/demos/text-field.html b/demos/text-field.html
index 44ae2aff4cc..9ed345fb731 100644
--- a/demos/text-field.html
+++ b/demos/text-field.html
@@ -382,6 +382,7 @@ <h2>Full-Width Text Field and Textarea</h2>
           textfield.removeValidationAttribute('required');
         }
       }
+
       demoReady(function() {
         var tfEl = document.getElementById('tf-outlined-example');
         var tfHelperText = document.getElementById('tf-outlined-validation-msg');

From f96970c41b2b116a3320cab7d7d87cb333813091 Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Tue, 13 Feb 2018 09:01:42 -0800
Subject: [PATCH 08/30] fix(text-field): closure annotations update

---
 packages/mdc-textfield/foundation.js | 2 +-
 packages/mdc-textfield/index.js      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/mdc-textfield/foundation.js b/packages/mdc-textfield/foundation.js
index 5077774d439..0b0c06bd78f 100644
--- a/packages/mdc-textfield/foundation.js
+++ b/packages/mdc-textfield/foundation.js
@@ -299,7 +299,7 @@ class MDCTextFieldFoundation extends MDCFoundation {
 
   /**
    * @param {string} attrName is the name of the attribute to be set
-   * @param {boolean|number|string} val is the value of attribute to be set
+   * @param {string} val is the value of attribute to be set
    */
   setValidationAttribute(attrName, val) {
     this.getNativeInput_().setAttribute(attrName, val);
diff --git a/packages/mdc-textfield/index.js b/packages/mdc-textfield/index.js
index 784dc5d8a95..0846a0314eb 100644
--- a/packages/mdc-textfield/index.js
+++ b/packages/mdc-textfield/index.js
@@ -212,7 +212,7 @@ class MDCTextField extends MDCComponent {
 
   /**
    * @param {string} attrName is the attribute name to be set
-   * @param {boolean|number|string} val is the value of attribute to be set
+   * @param {string} val is the value of attribute to be set
    */
   setValidationAttribute(attrName, val) {
     this.foundation_.setValidationAttribute(attrName, val);

From a14c7a6dbd6122014af0381cd4407a620c658f40 Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Wed, 14 Feb 2018 09:32:36 -0800
Subject: [PATCH 09/30] WIP - closure compilier tests

---
 demos/text-field.html                         | 71 ++++++++++++-------
 packages/mdc-textfield/foundation.js          |  4 +-
 packages/mdc-textfield/index.js               | 62 +++++++++++++++-
 .../unit/mdc-textfield/mdc-text-field.test.js | 32 +++++++++
 4 files changed, 140 insertions(+), 29 deletions(-)

diff --git a/demos/text-field.html b/demos/text-field.html
index 9ed345fb731..bba4f281303 100644
--- a/demos/text-field.html
+++ b/demos/text-field.html
@@ -174,8 +174,12 @@ <h2>Outlined Text Field</h2>
           <label for="outlined-required">Required</label>
         </div>
         <div>
-          <input id="outlined-pattern" type="checkbox">
-          <label for="outlined-pattern">Must be at least 8 characters</label>
+          <input id="outlined-minlength" type="checkbox">
+          <label for="outlined-minlength">Must be at least 8 characters</label>
+        </div>
+        <div>
+          <input id="outlined-maxlength" type="checkbox">
+          <label for="outlined-maxlength">Limit to 10 characters</label>
         </div>
       </section>
 
@@ -377,17 +381,30 @@ <h2>Full-Width Text Field and Textarea</h2>
     <script>
       function toggleRequired(textfield, isRequired) {
         if (isRequired) {
-          textfield.setValidationAttribute('required', 'true');
+          textfield.required = true;
+        } else {
+          textfield.required = false;
+        }
+      }
+
+      function togglePattern(textfield, checked) {
+        if (checked) {
+          textfield.pattern = '.{8,}';
         } else {
-          textfield.removeValidationAttribute('required');
+          textfield.pattern = '.*';
         }
       }
 
       demoReady(function() {
         var tfEl = document.getElementById('tf-outlined-example');
+        var outlinedInputEl = tfEl.querySelector('input');
         var tfHelperText = document.getElementById('tf-outlined-validation-msg');
         var tf = new mdc.textField.MDCTextField(tfEl);
         var wrapper = document.getElementById('demo-tf-outlined-wrapper');
+        var plainHelperText = 'Helper Text (possibly validation message)';
+        var minLengthError = 'Must be at least 8 characters';
+        var maxLengthError = 'Limit to 10 characters';
+
         document.getElementById('outlined-disable').addEventListener('change', function(evt) {
           tf.disabled = evt.target.checked;
         });
@@ -410,15 +427,28 @@ <h2>Full-Width Text Field and Textarea</h2>
         document.getElementById('outlined-required').addEventListener('change', function(evt) {
           toggleRequired(tf, evt.target.checked);
         });
-        document.getElementById('outlined-pattern').addEventListener('change', function(evt) {
+        document.getElementById('outlined-minlength').addEventListener('change', function(evt) {
+          var checked = evt.target.checked;
+          if (checked) {
+            tf.minlength = '8';
+          } else {
+            tf.minlength = '0';
+          }
+        });
+        document.getElementById('outlined-maxlength').addEventListener('change', function(evt) {
           var checked = evt.target.checked;
-          var plainHelperText = 'Helper Text (possibly validation message)';
-          var requiredHelperText = 'Must be at least 8 characters';requiredHelperText
           if (checked) {
-            tf.setValidationAttribute('minlength', 8);
-            tfHelperText.innerHTML = requiredHelperText;
+            tf.maxlength = '10';
+          } else {
+            tf.maxlength = '';
+          }
+        });
+        outlinedInputEl.addEventListener('blur', function() {
+          if (outlinedInputEl.validity.tooShort) {
+            tfHelperText.innerHTML = minLengthError;
+          } else if (outlinedInputEl.validity.tooLong) {
+            tfHelperText.innerHTML = maxLengthError;
           } else {
-            tf.removeValidationAttribute('minlength');
             tfHelperText.innerHTML = plainHelperText;
           }
         });
@@ -461,11 +491,7 @@ <h2>Full-Width Text Field and Textarea</h2>
           var checked = evt.target.checked;
           var requiredHelperText = 'Must be at least 8 characters';
           var plainHelperText = 'Helper Text (possibly validation message)';
-          if (checked) {
-            tf.setValidationAttribute('pattern', '.{8,}');
-          } else {
-            tf.setValidationAttribute('pattern', '.*');
-          }
+          togglePattern(tf, checked);
           helperText.innerHTML = checked ? requiredHelperText : plainHelperText;
         });
 
@@ -566,17 +592,10 @@ <h2>Full-Width Text Field and Textarea</h2>
 
         document.getElementById('pattern-leading-trailing').addEventListener('change', function(evt) {
           var checked = evt.target.checked;
-          if (checked) {
-            tfBoxLeading.setValidationAttribute('pattern', '.{8,}');
-            tfBoxTrailing.setValidationAttribute('pattern', '.{8,}');
-            tfOutlinedLeading.setValidationAttribute('pattern', '.{8,}');
-            tfOutlinedTrailing.setValidationAttribute('pattern', '.{8,}');
-          } else {
-            tfBoxLeading.setValidationAttribute('pattern', '.*');
-            tfBoxTrailing.setValidationAttribute('pattern', '.*');
-            tfOutlinedLeading.setValidationAttribute('pattern', '.*');
-            tfOutlinedTrailing.setValidationAttribute('pattern', '.*');
-          }
+          togglePattern(tfBoxLeading, checked);
+          togglePattern(tfBoxTrailing, checked);
+          togglePattern(tfOutlinedLeading, checked);
+          togglePattern(tfOutlinedTrailing, checked);
         });
 
         document.getElementById('leading-trailing-alternate-colors').addEventListener('change', function(evt) {
diff --git a/packages/mdc-textfield/foundation.js b/packages/mdc-textfield/foundation.js
index 0b0c06bd78f..8941dea7d89 100644
--- a/packages/mdc-textfield/foundation.js
+++ b/packages/mdc-textfield/foundation.js
@@ -290,7 +290,7 @@ class MDCTextFieldFoundation extends MDCFoundation {
   }
 
   /**
-   * @return {string} the attribute value from the input element
+   * @return {boolean|string} the attribute value from the input element
    * @param {string} attrName is the name of the attribute on the input element
    */
   getValidationAttribute(attrName) {
@@ -299,7 +299,7 @@ class MDCTextFieldFoundation extends MDCFoundation {
 
   /**
    * @param {string} attrName is the name of the attribute to be set
-   * @param {string} val is the value of attribute to be set
+   * @param {boolean|string} val is the value of attribute to be set
    */
   setValidationAttribute(attrName, val) {
     this.getNativeInput_().setAttribute(attrName, val);
diff --git a/packages/mdc-textfield/index.js b/packages/mdc-textfield/index.js
index 0846a0314eb..2455263e42e 100644
--- a/packages/mdc-textfield/index.js
+++ b/packages/mdc-textfield/index.js
@@ -203,7 +203,67 @@ class MDCTextField extends MDCComponent {
   }
 
   /**
-   * @return {string} the attribute value from the input element
+   * @return {boolean|string} True if the Text Field is required.
+   */
+  get required() {
+    return this.foundation_.getValidationAttribute('required');
+  }
+
+  /**
+   * @param {boolean|string} required Sets the Text Field to required.
+   */
+  set required(required) {
+    if (!required) {
+      this.foundation_.removeValidationAttribute('required');
+    } else {
+      this.foundation_.setValidationAttribute('required', required);
+    }
+  }
+
+  /**
+   * @return {string} pattern that is used to validate.
+   */
+  get pattern() {
+    return this.foundation_.getValidationAttribute('pattern');
+  }
+
+  /**
+   * @param {string} pattern Sets the Text Field's validation pattern.
+   */
+  set pattern(pattern) {
+    this.foundation_.setValidationAttribute('pattern', pattern);
+  }
+
+  /**
+   * @return {string} minlength that is used to validate.
+   */
+  get minlength() {
+    return this.foundation_.getValidationAttribute('minlength');
+  }
+
+  /**
+   * @param {string} length Sets the Text Field's validation minlength.
+   */
+  set minlength(length) {
+    this.foundation_.setValidationAttribute('minlength', length);
+  }
+
+  /**
+   * @return {string} maxlength that is used to validate.
+   */
+  get maxlength() {
+    return this.foundation_.getValidationAttribute('maxlength');
+  }
+
+  /**
+   * @param {string} length Sets the Text Field's validation maxlength.
+   */
+  set maxlength(length) {
+    this.foundation_.setValidationAttribute('maxlength', length);
+  }
+
+  /**
+   * @return {boolean|string} the attribute value from the input element
    * @param {string} attrName is the name of the attribute on the input element
    */
   getValidationAttribute(attrName) {
diff --git a/test/unit/mdc-textfield/mdc-text-field.test.js b/test/unit/mdc-textfield/mdc-text-field.test.js
index b339e94eb97..7e272ac3eea 100644
--- a/test/unit/mdc-textfield/mdc-text-field.test.js
+++ b/test/unit/mdc-textfield/mdc-text-field.test.js
@@ -416,6 +416,38 @@ test('get/set valid', () => {
   td.verify(mockFoundation.setValid(true));
 });
 
+test('get/set required', () => {
+  const {component, mockFoundation} = setupMockFoundationTest();
+  component.required;
+  td.verify(mockFoundation.getValidationAttribute('required'));
+  component.required = true;
+  td.verify(mockFoundation.setValidationAttribute('required', true));
+});
+
+test('get/set pattern', () => {
+  const {component, mockFoundation} = setupMockFoundationTest();
+  component.pattern;
+  td.verify(mockFoundation.getValidationAttribute('pattern'));
+  component.pattern = 'foo';
+  td.verify(mockFoundation.setValidationAttribute('pattern', 'foo'));
+});
+
+test('get/set minlength', () => {
+  const {component, mockFoundation} = setupMockFoundationTest();
+  component.minlength;
+  td.verify(mockFoundation.getValidationAttribute('minlength'));
+  component.minlength = '8';
+  td.verify(mockFoundation.setValidationAttribute('minlength', '8'));
+});
+
+test('get/set maxlength', () => {
+  const {component, mockFoundation} = setupMockFoundationTest();
+  component.maxlength;
+  td.verify(mockFoundation.getValidationAttribute('maxlength'));
+  component.maxlength = '10';
+  td.verify(mockFoundation.setValidationAttribute('maxlength', '10'));
+});
+
 test('setValidationAttribute', () => {
   const {component, mockFoundation} = setupMockFoundationTest();
   component.setValidationAttribute('required', true);

From 228c92d6a2adc347cd8e106f59f50f578c13766e Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Wed, 14 Feb 2018 13:36:02 -0800
Subject: [PATCH 10/30] fix(text-field): using mutation observer to style
 validity

---
 demos/text-field.html                | 50 +++++++++------
 packages/mdc-textfield/foundation.js | 52 +++++++--------
 packages/mdc-textfield/index.js      | 94 ++++------------------------
 3 files changed, 64 insertions(+), 132 deletions(-)

diff --git a/demos/text-field.html b/demos/text-field.html
index bba4f281303..a4fdf90b9c0 100644
--- a/demos/text-field.html
+++ b/demos/text-field.html
@@ -397,9 +397,9 @@ <h2>Full-Width Text Field and Textarea</h2>
 
       demoReady(function() {
         var tfEl = document.getElementById('tf-outlined-example');
-        var outlinedInputEl = tfEl.querySelector('input');
         var tfHelperText = document.getElementById('tf-outlined-validation-msg');
         var tf = new mdc.textField.MDCTextField(tfEl);
+        var outlinedInputEl = tfEl.querySelector('input');
         var wrapper = document.getElementById('demo-tf-outlined-wrapper');
         var plainHelperText = 'Helper Text (possibly validation message)';
         var minLengthError = 'Must be at least 8 characters';
@@ -425,22 +425,22 @@ <h2>Full-Width Text Field and Textarea</h2>
           tf.layout();
         });
         document.getElementById('outlined-required').addEventListener('change', function(evt) {
-          toggleRequired(tf, evt.target.checked);
+          toggleRequired(outlinedInputEl, evt.target.checked);
         });
         document.getElementById('outlined-minlength').addEventListener('change', function(evt) {
           var checked = evt.target.checked;
           if (checked) {
-            tf.minlength = '8';
+            outlinedInputEl.minLength = 8;
           } else {
-            tf.minlength = '0';
+            outlinedInputEl.minLength = 0;
           }
         });
         document.getElementById('outlined-maxlength').addEventListener('change', function(evt) {
           var checked = evt.target.checked;
           if (checked) {
-            tf.maxlength = '10';
+            outlinedInputEl.maxLength = 10;
           } else {
-            tf.maxlength = '';
+            outlinedInputEl.removeAttribute('maxLength');
           }
         });
         outlinedInputEl.addEventListener('blur', function() {
@@ -457,6 +457,7 @@ <h2>Full-Width Text Field and Textarea</h2>
       demoReady(function() {
         var tfEl = document.getElementById('tf-box-example');
         var tf = new mdc.textField.MDCTextField(tfEl);
+        var boxInputEl = tfEl.querySelector('input');
         var wrapper = document.getElementById('demo-tf-box-wrapper');
         var helperText = document.getElementById('box-text-field-helper-text');
 
@@ -485,13 +486,13 @@ <h2>Full-Width Text Field and Textarea</h2>
         });
 
         document.getElementById('box-required').addEventListener('change', function(evt) {
-          toggleRequired(tf, evt.target.checked);
+          toggleRequired(boxInputEl, evt.target.checked);
         });
         document.getElementById('box-pattern').addEventListener('change', function(evt) {
           var checked = evt.target.checked;
           var requiredHelperText = 'Must be at least 8 characters';
           var plainHelperText = 'Helper Text (possibly validation message)';
-          togglePattern(tf, checked);
+          togglePattern(boxInputEl, checked);
           helperText.innerHTML = checked ? requiredHelperText : plainHelperText;
         });
 
@@ -524,18 +525,22 @@ <h2>Full-Width Text Field and Textarea</h2>
         var tfBoxLeadingEl = document.getElementById('tf-box-leading-example');
         var tfBoxLeading = new mdc.textField.MDCTextField(tfBoxLeadingEl);
         var wrapperBoxLeading = document.getElementById('demo-tf-box-leading-wrapper');
+        var tfBoxLeadingInput = tfBoxLeadingEl.querySelector('input');
 
         var tfBoxTrailingEl = document.getElementById('tf-box-trailing-example');
         var tfBoxTrailing = new mdc.textField.MDCTextField(tfBoxTrailingEl);
         var wrapperBoxTrailing = document.getElementById('demo-tf-box-trailing-wrapper');
+        var tfBoxTrailingInput = tfBoxTrailingEl.querySelector('input');
 
         var tfOutlinedLeadingEl = document.getElementById('tf-outlined-leading-example');
         var tfOutlinedLeading = new mdc.textField.MDCTextField(tfOutlinedLeadingEl);
         var wrapperOutlinedLeading = document.getElementById('demo-tf-outlined-leading-wrapper');
+        var tfOutlinedLeadingInput = tfOutlinedLeadingEl.querySelector('input');
 
         var tfOutlinedTrailingEl = document.getElementById('tf-outlined-trailing-example');
         var tfOutlinedTrailing = new mdc.textField.MDCTextField(tfOutlinedTrailingEl);
         var wrapperOutlinedTrailing = document.getElementById('demo-tf-outlined-trailing-wrapper');
+        var tfOutlinedTrailingInput = tfOutlinedTrailingEl.querySelector('input');
 
         var tfIcons = document.querySelectorAll('.mdc-text-field__icon');
         var tfInputs = tfIconContainer.querySelectorAll('.mdc-text-field__input');
@@ -584,18 +589,18 @@ <h2>Full-Width Text Field and Textarea</h2>
 
         document.getElementById('required-leading-trailing').addEventListener('change', function(evt) {
           var checked = evt.target.checked;
-          toggleRequired(tfBoxLeading, checked);
-          toggleRequired(tfBoxTrailing, checked);
-          toggleRequired(tfOutlinedLeading, checked);
-          toggleRequired(tfOutlinedTrailing, checked);
+          toggleRequired(tfBoxLeadingInput, checked);
+          toggleRequired(tfBoxTrailingInput, checked);
+          toggleRequired(tfOutlinedLeadingInput, checked);
+          toggleRequired(tfOutlinedTrailingInput, checked);
         });
 
         document.getElementById('pattern-leading-trailing').addEventListener('change', function(evt) {
           var checked = evt.target.checked;
-          togglePattern(tfBoxLeading, checked);
-          togglePattern(tfBoxTrailing, checked);
-          togglePattern(tfOutlinedLeading, checked);
-          togglePattern(tfOutlinedTrailing, checked);
+          togglePattern(tfBoxLeadingInput, checked);
+          togglePattern(tfBoxTrailingInput, checked);
+          togglePattern(tfOutlinedLeadingInput, checked);
+          togglePattern(tfOutlinedTrailingInput, checked);
         });
 
         document.getElementById('leading-trailing-alternate-colors').addEventListener('change', function(evt) {
@@ -619,6 +624,7 @@ <h2>Full-Width Text Field and Textarea</h2>
         var tfRoot = section.querySelector('.mdc-text-field');
         var helperText = section.querySelector('.mdc-text-field-helper-text');
         var tf = new mdc.textField.MDCTextField(tfRoot);
+        var inputEl = tfRoot.querySelector('input');
 
         document.getElementById('disable').addEventListener('change', function(evt) {
           var target = evt.target;
@@ -637,7 +643,7 @@ <h2>Full-Width Text Field and Textarea</h2>
           tfRoot.classList[target.checked ? 'add' : 'remove']('mdc-text-field--dense');
         });
         document.getElementById('required').addEventListener('change', function(evt) {
-          toggleRequired(tf, evt.target.checked);
+          toggleRequired(inputEl, evt.target.checked);
         });
         document.getElementById('alternate-colors').addEventListener('change', function (evt) {
           var target = evt.target;
@@ -668,6 +674,8 @@ <h2>Full-Width Text Field and Textarea</h2>
         var section = document.getElementById('demo-text-field-textarea-wrapper');
         var tfRoot = section.querySelector('.mdc-text-field');
         var tf = new mdc.textField.MDCTextField(tfRoot);
+        var inputEl = tfRoot.querySelector('textarea');
+
         document.getElementById('textarea-disable').addEventListener('change', function(evt) {
           var target = evt.target;
           tf.disabled = target.checked;
@@ -686,7 +694,7 @@ <h2>Full-Width Text Field and Textarea</h2>
           tfRoot.classList[target.checked ? 'add' : 'remove']('demo-textarea');
         });
         document.getElementById('textarea-required').addEventListener('change', function(evt) {
-          toggleRequired(tf, evt.target.checked);
+          toggleRequired(inputEl, evt.target.checked);
         });
       });
 
@@ -696,6 +704,8 @@ <h2>Full-Width Text Field and Textarea</h2>
         var tfMultiRoot = section.querySelector('.mdc-text-field--textarea');
         var tf = new mdc.textField.MDCTextField(tfRoot);
         var tfMulti = new mdc.textField.MDCTextField(tfMultiRoot);
+        var inputEl = tfRoot.querySelector('input');
+        var inputMultiEl = tfMultiRoot.querySelector('textarea');
 
         document.getElementById('fullwidth-disable').addEventListener('change', function(evt) {
           var target = evt.target;
@@ -712,8 +722,8 @@ <h2>Full-Width Text Field and Textarea</h2>
         });
         document.getElementById('fullwidth-required').addEventListener('change', function(evt) {
           var checked = evt.target.checked;
-          toggleRequired(tf, evt.target.checked);
-          toggleRequired(tfMulti, evt.target.checked);
+          toggleRequired(inputEl, evt.target.checked);
+          toggleRequired(inputMultiEl, evt.target.checked);
         });
 
         document.getElementById('fullwidth-alternate-colors').addEventListener('change', function (evt) {
diff --git a/packages/mdc-textfield/foundation.js b/packages/mdc-textfield/foundation.js
index 8941dea7d89..acabf321f0d 100644
--- a/packages/mdc-textfield/foundation.js
+++ b/packages/mdc-textfield/foundation.js
@@ -61,6 +61,8 @@ class MDCTextFieldFoundation extends MDCFoundation {
       deregisterTextFieldInteractionHandler: () => {},
       registerInputInteractionHandler: () => {},
       deregisterInputInteractionHandler: () => {},
+      registerValidationAttributeChangeHandler: () => {},
+      deregisterValidationAttributeChangeHandler: () => {},
       getNativeInput: () => {},
       isFocused: () => {},
       isRtl: () => {},
@@ -104,6 +106,8 @@ class MDCTextFieldFoundation extends MDCFoundation {
     this.setPointerXOffset_ = (evt) => this.setTransformOrigin(evt);
     /** @private {function(!Event): undefined} */
     this.textFieldInteractionHandler_ = () => this.handleTextFieldInteraction();
+    /** @private {function(!Array): undefined} */
+    this.validationAttributeChangeHandler_ = (mutations) => this.handleValidationAttributeMutation(mutations);
   }
 
   init() {
@@ -127,6 +131,7 @@ class MDCTextFieldFoundation extends MDCFoundation {
     ['click', 'keydown'].forEach((evtType) => {
       this.adapter_.registerTextFieldInteractionHandler(evtType, this.textFieldInteractionHandler_);
     });
+    this.adapter_.registerValidationAttributeChangeHandler(this.validationAttributeChangeHandler_);
   }
 
   destroy() {
@@ -140,6 +145,7 @@ class MDCTextFieldFoundation extends MDCFoundation {
     ['click', 'keydown'].forEach((evtType) => {
       this.adapter_.deregisterTextFieldInteractionHandler(evtType, this.textFieldInteractionHandler_);
     });
+    this.adapter_.deregisterValidationAttributeChangeHandler();
   }
 
   /**
@@ -152,6 +158,23 @@ class MDCTextFieldFoundation extends MDCFoundation {
     this.receivedUserInput_ = true;
   }
 
+  /**
+   * Handles validation attribute changes
+   */
+  handleValidationAttributeMutation(mutationsList) {
+    // whitelist based off of https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation
+    // under section: `Validation-related attributes`
+    const validationAttrWhitelist = [
+      'pattern', 'min', 'max', 'required', 'step', 'minlength', 'maxlength'
+    ];
+
+    mutationsList.forEach(mutation => {
+      if (validationAttrWhitelist.includes(mutation.attributeName)) {
+        this.styleValidity_(true);
+      }
+    });
+  }
+
   /**
    * Updates the focus outline for outlined text fields.
    */
@@ -289,35 +312,6 @@ class MDCTextFieldFoundation extends MDCFoundation {
     this.styleDisabled_(disabled);
   }
 
-  /**
-   * @return {boolean|string} the attribute value from the input element
-   * @param {string} attrName is the name of the attribute on the input element
-   */
-  getValidationAttribute(attrName) {
-    return this.getNativeInput_().getAttribute(attrName);
-  }
-
-  /**
-   * @param {string} attrName is the name of the attribute to be set
-   * @param {boolean|string} val is the value of attribute to be set
-   */
-  setValidationAttribute(attrName, val) {
-    this.getNativeInput_().setAttribute(attrName, val);
-    // Setting validation to true even if input is incorrect.
-    // If developer toggles a validation property (required, minlength, etc)
-    // the user should have a chance interact with the input before it being
-    // invalid again.
-    this.styleValidity_(true);
-  }
-
-  /**
-   * @param {string} attrName is the name of the attribute to remove from input element
-   */
-  removeValidationAttribute(attrName) {
-    this.getNativeInput_().removeAttribute(attrName);
-    this.styleValidity_(true);
-  }
-
   /**
    * @param {string} content Sets the content of the helper text.
    */
diff --git a/packages/mdc-textfield/index.js b/packages/mdc-textfield/index.js
index 2455263e42e..12521c12dd3 100644
--- a/packages/mdc-textfield/index.js
+++ b/packages/mdc-textfield/index.js
@@ -57,6 +57,8 @@ class MDCTextField extends MDCComponent {
     this.label_;
     /** @private {?MDCTextFieldOutline} */
     this.outline_;
+    /** @private {?MutationObserver} */
+    this.observers_;
   }
 
   /**
@@ -128,6 +130,7 @@ class MDCTextField extends MDCComponent {
       const foundation = new MDCRippleFoundation(adapter);
       this.ripple = rippleFactory(rippleRoot, foundation);
     }
+    this.observers_ = [];
   }
 
   destroy() {
@@ -202,89 +205,6 @@ class MDCTextField extends MDCComponent {
     this.foundation_.setValid(valid);
   }
 
-  /**
-   * @return {boolean|string} True if the Text Field is required.
-   */
-  get required() {
-    return this.foundation_.getValidationAttribute('required');
-  }
-
-  /**
-   * @param {boolean|string} required Sets the Text Field to required.
-   */
-  set required(required) {
-    if (!required) {
-      this.foundation_.removeValidationAttribute('required');
-    } else {
-      this.foundation_.setValidationAttribute('required', required);
-    }
-  }
-
-  /**
-   * @return {string} pattern that is used to validate.
-   */
-  get pattern() {
-    return this.foundation_.getValidationAttribute('pattern');
-  }
-
-  /**
-   * @param {string} pattern Sets the Text Field's validation pattern.
-   */
-  set pattern(pattern) {
-    this.foundation_.setValidationAttribute('pattern', pattern);
-  }
-
-  /**
-   * @return {string} minlength that is used to validate.
-   */
-  get minlength() {
-    return this.foundation_.getValidationAttribute('minlength');
-  }
-
-  /**
-   * @param {string} length Sets the Text Field's validation minlength.
-   */
-  set minlength(length) {
-    this.foundation_.setValidationAttribute('minlength', length);
-  }
-
-  /**
-   * @return {string} maxlength that is used to validate.
-   */
-  get maxlength() {
-    return this.foundation_.getValidationAttribute('maxlength');
-  }
-
-  /**
-   * @param {string} length Sets the Text Field's validation maxlength.
-   */
-  set maxlength(length) {
-    this.foundation_.setValidationAttribute('maxlength', length);
-  }
-
-  /**
-   * @return {boolean|string} the attribute value from the input element
-   * @param {string} attrName is the name of the attribute on the input element
-   */
-  getValidationAttribute(attrName) {
-    return this.foundation_.getValidationAttribute(attrName);
-  }
-
-  /**
-   * @param {string} attrName is the attribute name to be set
-   * @param {string} val is the value of attribute to be set
-   */
-  setValidationAttribute(attrName, val) {
-    this.foundation_.setValidationAttribute(attrName, val);
-  }
-
-  /**
-   * @param {string} attrName is the name of the attribute to remove from input element
-   */
-  removeValidationAttribute(attrName) {
-    this.foundation_.removeValidationAttribute(attrName);
-  }
-
   /**
    * Sets the helper text element content.
    * @param {string} content
@@ -317,6 +237,14 @@ class MDCTextField extends MDCComponent {
         hasClass: (className) => this.root_.classList.contains(className),
         registerTextFieldInteractionHandler: (evtType, handler) => this.root_.addEventListener(evtType, handler),
         deregisterTextFieldInteractionHandler: (evtType, handler) => this.root_.removeEventListener(evtType, handler),
+        registerValidationAttributeChangeHandler: (handler) => {
+          const observer = new MutationObserver(handler);
+          const targetNode = this.root_.querySelector(strings.INPUT_SELECTOR);
+          const config = { attributes: true };
+          observer.observe(targetNode, config);
+          this.observers_.push(observer);
+        },
+        deregisterValidationAttributeChangeHandler: () => this.observers_.forEach(observer => observer.disconnect()),
         isFocused: () => {
           return document.activeElement === this.root_.querySelector(strings.INPUT_SELECTOR);
         },

From 7170f69afe10838d7941a36df15189b7e8b93ab5 Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Wed, 14 Feb 2018 16:19:53 -0800
Subject: [PATCH 11/30] WIP - tests

---
 packages/mdc-textfield/foundation.js          |  5 +-
 packages/mdc-textfield/index.js               |  4 +-
 test/unit/mdc-textfield/foundation.test.js    | 85 ++++++++++---------
 .../unit/mdc-textfield/mdc-text-field.test.js | 62 +++-----------
 4 files changed, 59 insertions(+), 97 deletions(-)

diff --git a/packages/mdc-textfield/foundation.js b/packages/mdc-textfield/foundation.js
index acabf321f0d..ad1f03fe70a 100644
--- a/packages/mdc-textfield/foundation.js
+++ b/packages/mdc-textfield/foundation.js
@@ -165,10 +165,9 @@ class MDCTextFieldFoundation extends MDCFoundation {
     // whitelist based off of https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation
     // under section: `Validation-related attributes`
     const validationAttrWhitelist = [
-      'pattern', 'min', 'max', 'required', 'step', 'minlength', 'maxlength'
+      'pattern', 'min', 'max', 'required', 'step', 'minlength', 'maxlength',
     ];
-
-    mutationsList.forEach(mutation => {
+    mutationsList.forEach((mutation) => {
       if (validationAttrWhitelist.includes(mutation.attributeName)) {
         this.styleValidity_(true);
       }
diff --git a/packages/mdc-textfield/index.js b/packages/mdc-textfield/index.js
index 12521c12dd3..ced46483c9e 100644
--- a/packages/mdc-textfield/index.js
+++ b/packages/mdc-textfield/index.js
@@ -240,11 +240,11 @@ class MDCTextField extends MDCComponent {
         registerValidationAttributeChangeHandler: (handler) => {
           const observer = new MutationObserver(handler);
           const targetNode = this.root_.querySelector(strings.INPUT_SELECTOR);
-          const config = { attributes: true };
+          const config = {attributes: true};
           observer.observe(targetNode, config);
           this.observers_.push(observer);
         },
-        deregisterValidationAttributeChangeHandler: () => this.observers_.forEach(observer => observer.disconnect()),
+        deregisterValidationAttributeChangeHandler: () => this.observers_.forEach((observer) => observer.disconnect()),
         isFocused: () => {
           return document.activeElement === this.root_.querySelector(strings.INPUT_SELECTOR);
         },
diff --git a/test/unit/mdc-textfield/foundation.test.js b/test/unit/mdc-textfield/foundation.test.js
index a54c04748a4..99d668bf7d9 100644
--- a/test/unit/mdc-textfield/foundation.test.js
+++ b/test/unit/mdc-textfield/foundation.test.js
@@ -42,7 +42,8 @@ test('defaultAdapter returns a complete adapter implementation', () => {
     'registerTextFieldInteractionHandler', 'deregisterTextFieldInteractionHandler',
     'registerInputInteractionHandler', 'deregisterInputInteractionHandler',
     'getNativeInput', 'isFocused', 'isRtl', 'activateLineRipple', 'deactivateLineRipple',
-    'setLineRippleTransformOrigin',
+    'setLineRippleTransformOrigin', 'registerValidationAttributeChangeHandler',
+    'deregisterValidationAttributeChangeHandler',
   ]);
 });
 
@@ -202,47 +203,6 @@ test('#setValid updates classes', () => {
   td.verify(mockAdapter.removeClass(cssClasses.DISABLED), {times: 0});
 });
 
-test('#setValidationAttribute required to true updates CSS classes', () => {
-  // Native validity checking does not apply in unittests, so manually mark as valid or invalid.
-  const {foundation, mockAdapter, helperText} =
-    setupValueTest('', /* isValid */ false);
-
-  td.when(mockAdapter.getNativeInput()).thenReturn({setAttribute: () => null});
-  foundation.setValidationAttribute('required', 'true');
-  td.verify(mockAdapter.removeClass(cssClasses.INVALID));
-  td.verify(helperText.setValidity(true));
-
-  // None of these is affected by setValidationAttribute.
-  td.verify(mockAdapter.addClass(cssClasses.FOCUSED), {times: 0});
-  td.verify(mockAdapter.removeClass(cssClasses.FOCUSED), {times: 0});
-  td.verify(mockAdapter.addClass(cssClasses.DISABLED), {times: 0});
-  td.verify(mockAdapter.removeClass(cssClasses.DISABLED), {times: 0});
-});
-
-test('#removeValidationAttribute required updates CSS classes', () => {
-  const {foundation, mockAdapter, helperText} =
-    setupValueTest('', /* isValid */ false);
-
-  td.when(mockAdapter.getNativeInput()).thenReturn({removeAttribute: () => null});
-  foundation.removeValidationAttribute('required');
-  td.verify(mockAdapter.removeClass(cssClasses.INVALID));
-  td.verify(helperText.setValidity(true));
-
-  // None of these is affected by setValidationAttribute.
-  td.verify(mockAdapter.addClass(cssClasses.FOCUSED), {times: 0});
-  td.verify(mockAdapter.removeClass(cssClasses.FOCUSED), {times: 0});
-  td.verify(mockAdapter.addClass(cssClasses.DISABLED), {times: 0});
-  td.verify(mockAdapter.removeClass(cssClasses.DISABLED), {times: 0});
-});
-
-test('#getValidationAttribute required returns correct value', () => {
-  const {foundation, mockAdapter} =
-    setupValueTest('', /* isValid */ false);
-
-  td.when(mockAdapter.getNativeInput()).thenReturn({getAttribute: () => true});
-  assert.equal(foundation.getValidationAttribute('required'), true);
-});
-
 test('#setDisabled flips disabled when a native input is given', () => {
   const {foundation, mockAdapter} = setupTest();
   const nativeInput = {disabled: false};
@@ -338,6 +298,7 @@ test('#init adds event listeners', () => {
   td.verify(mockAdapter.registerInputInteractionHandler('touchstart', td.matchers.isA(Function)));
   td.verify(mockAdapter.registerTextFieldInteractionHandler('click', td.matchers.isA(Function)));
   td.verify(mockAdapter.registerTextFieldInteractionHandler('keydown', td.matchers.isA(Function)));
+  td.verify(mockAdapter.registerValidationAttributeChangeHandler(td.matchers.isA(Function)));
 });
 
 test('#destroy removes event listeners', () => {
@@ -351,6 +312,7 @@ test('#destroy removes event listeners', () => {
   td.verify(mockAdapter.deregisterInputInteractionHandler('touchstart', td.matchers.isA(Function)));
   td.verify(mockAdapter.deregisterTextFieldInteractionHandler('click', td.matchers.isA(Function)));
   td.verify(mockAdapter.deregisterTextFieldInteractionHandler('keydown', td.matchers.isA(Function)));
+  td.verify(mockAdapter.deregisterValidationAttributeChangeHandler());
 });
 
 test('#init floats label if the input contains a value', () => {
@@ -693,3 +655,42 @@ test('touchstart on the input sets the line ripple origin', () => {
 
   td.verify(mockAdapter.setLineRippleTransformOrigin(td.matchers.anything()));
 });
+
+test('on validation attribute change calls styleValidity_', () => {
+  const {foundation, mockAdapter, helperText} = setupTest();
+  let attributeChange;
+  td.when(mockAdapter.registerValidationAttributeChangeHandler(td.matchers.isA(Function)))
+    .thenDo((handler) => {
+      attributeChange = handler;
+    });
+  foundation.init();
+
+  attributeChange([{attributeName: 'required'}]);
+  td.verify(mockAdapter.removeClass(cssClasses.INVALID));
+  td.verify(helperText.setValidity(true));
+
+  // None of these is affected by setValidationAttribute.
+  td.verify(mockAdapter.addClass(cssClasses.FOCUSED), {times: 0});
+  td.verify(mockAdapter.removeClass(cssClasses.FOCUSED), {times: 0});
+  td.verify(mockAdapter.addClass(cssClasses.DISABLED), {times: 0});
+  td.verify(mockAdapter.removeClass(cssClasses.DISABLED), {times: 0});
+});
+
+test('should not call styleValidity_ on non-whitelisted attribute change', () => {
+  const {foundation, mockAdapter, helperText} = setupTest();
+  let attributeChange;
+  td.when(mockAdapter.registerValidationAttributeChangeHandler(td.matchers.isA(Function)))
+    .thenDo((handler) => {
+      attributeChange = handler;
+    });
+  foundation.init();
+
+  attributeChange([{attributeName: 'form'}]);
+  td.verify(mockAdapter.removeClass(cssClasses.INVALID), {times: 0});
+
+  // None of these is affected by setValidationAttribute.
+  td.verify(mockAdapter.addClass(cssClasses.FOCUSED), {times: 0});
+  td.verify(mockAdapter.removeClass(cssClasses.FOCUSED), {times: 0});
+  td.verify(mockAdapter.addClass(cssClasses.DISABLED), {times: 0});
+  td.verify(mockAdapter.removeClass(cssClasses.DISABLED), {times: 0});
+});
diff --git a/test/unit/mdc-textfield/mdc-text-field.test.js b/test/unit/mdc-textfield/mdc-text-field.test.js
index 7e272ac3eea..0ccacaf366b 100644
--- a/test/unit/mdc-textfield/mdc-text-field.test.js
+++ b/test/unit/mdc-textfield/mdc-text-field.test.js
@@ -352,6 +352,18 @@ test('#adapter.deregisterTextFieldInteractionHandler removes an event handler fo
   td.verify(handler(td.matchers.anything()));
 });
 
+test('#adapter.registerValidationAttributeChangeHandler add a mutation observer on the component input element', (done) => {
+  const {root, component} = setupTest();
+  component.foundation_.adapter_.registerValidationAttributeChangeHandler(handler);
+  root.classList.add('mdc-text-field--invalid');
+  assert.isOk(root.classList.contains('mdc-text-field--invalid'));
+  root.querySelector('.mdc-text-field__input').required = true;
+  setTimeout(() => {
+    assert.isNotOk(root.classList.contains('mdc-text-field--invalid'));
+    done();
+  });
+});
+
 test('#adapter.getNativeInput returns the component input element', () => {
   const {root, component} = setupTest();
   assert.equal(
@@ -415,53 +427,3 @@ test('get/set valid', () => {
   component.valid = true;
   td.verify(mockFoundation.setValid(true));
 });
-
-test('get/set required', () => {
-  const {component, mockFoundation} = setupMockFoundationTest();
-  component.required;
-  td.verify(mockFoundation.getValidationAttribute('required'));
-  component.required = true;
-  td.verify(mockFoundation.setValidationAttribute('required', true));
-});
-
-test('get/set pattern', () => {
-  const {component, mockFoundation} = setupMockFoundationTest();
-  component.pattern;
-  td.verify(mockFoundation.getValidationAttribute('pattern'));
-  component.pattern = 'foo';
-  td.verify(mockFoundation.setValidationAttribute('pattern', 'foo'));
-});
-
-test('get/set minlength', () => {
-  const {component, mockFoundation} = setupMockFoundationTest();
-  component.minlength;
-  td.verify(mockFoundation.getValidationAttribute('minlength'));
-  component.minlength = '8';
-  td.verify(mockFoundation.setValidationAttribute('minlength', '8'));
-});
-
-test('get/set maxlength', () => {
-  const {component, mockFoundation} = setupMockFoundationTest();
-  component.maxlength;
-  td.verify(mockFoundation.getValidationAttribute('maxlength'));
-  component.maxlength = '10';
-  td.verify(mockFoundation.setValidationAttribute('maxlength', '10'));
-});
-
-test('setValidationAttribute', () => {
-  const {component, mockFoundation} = setupMockFoundationTest();
-  component.setValidationAttribute('required', true);
-  td.verify(mockFoundation.setValidationAttribute('required', true));
-});
-
-test('removeValidationAttribute', () => {
-  const {component, mockFoundation} = setupMockFoundationTest();
-  component.removeValidationAttribute('required');
-  td.verify(mockFoundation.removeValidationAttribute('required'));
-});
-
-test('getValidationAttribute', () => {
-  const {component, mockFoundation} = setupMockFoundationTest();
-  component.getValidationAttribute('required');
-  td.verify(mockFoundation.getValidationAttribute('required'));
-});

From 9c64e18e61da5dffd63d6cf7c7f7ceb51587567c Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Thu, 15 Feb 2018 14:14:23 -0800
Subject: [PATCH 12/30] fix(text-field): updated closure annotations

---
 packages/mdc-textfield/adapter.js             | 11 +++++++
 packages/mdc-textfield/index.js               |  2 +-
 test/unit/mdc-textfield/foundation.test.js    | 26 +++++++++++++++-
 .../unit/mdc-textfield/mdc-text-field.test.js | 30 +++++++++++++++----
 4 files changed, 61 insertions(+), 8 deletions(-)

diff --git a/packages/mdc-textfield/adapter.js b/packages/mdc-textfield/adapter.js
index fc31be86a0a..0adb3eeab02 100644
--- a/packages/mdc-textfield/adapter.js
+++ b/packages/mdc-textfield/adapter.js
@@ -106,6 +106,17 @@ class MDCTextFieldAdapter {
    */
   deregisterInputInteractionHandler(evtType, handler) {}
 
+  /**
+   * Registers a validation attribute change listener on the input element.
+   * @param {function(!Array): undefined} handler
+   */
+  registerValidationAttributeChangeHandler(handler) {}
+
+  /**
+   * Disconnect all validation attrinute listeners on the input element.
+   */
+  deregisterValidationAttributeChangeHandler() {}
+
   /**
    * Returns an object representing the native text input element, with a
    * similar API shape. The object returned should include the value, disabled
diff --git a/packages/mdc-textfield/index.js b/packages/mdc-textfield/index.js
index ced46483c9e..7fbc8ce441d 100644
--- a/packages/mdc-textfield/index.js
+++ b/packages/mdc-textfield/index.js
@@ -57,7 +57,7 @@ class MDCTextField extends MDCComponent {
     this.label_;
     /** @private {?MDCTextFieldOutline} */
     this.outline_;
-    /** @private {?MutationObserver} */
+    /** @private {?Array<MutationObserver>} */
     this.observers_;
   }
 
diff --git a/test/unit/mdc-textfield/foundation.test.js b/test/unit/mdc-textfield/foundation.test.js
index 99d668bf7d9..d8de8a9c12d 100644
--- a/test/unit/mdc-textfield/foundation.test.js
+++ b/test/unit/mdc-textfield/foundation.test.js
@@ -482,6 +482,30 @@ test('on focus makes helper text visible to the screen reader', () => {
   td.verify(helperText.showToScreenReader());
 });
 
+test('on validation attribute change should update invalid classes', () => {
+  const {foundation, mockAdapter} = setupTest();
+  let attributeMutate;
+  td.when(mockAdapter.registerValidationAttributeChangeHandler(td.matchers.isA(Function)))
+    .thenDo((handler) => {
+      attributeMutate = handler;
+    });
+  foundation.init();
+  attributeMutate([{attributeName: 'required'}]);
+  td.verify(mockAdapter.removeClass('mdc-text-field--invalid'));
+});
+
+test('on attribute change non-whitelisted should not update classes', () => {
+  const {foundation, mockAdapter} = setupTest();
+  let attributeMutate;
+  td.when(mockAdapter.registerValidationAttributeChangeHandler(td.matchers.isA(Function)))
+    .thenDo((handler) => {
+      attributeMutate = handler;
+    });
+  foundation.init();
+  attributeMutate([{attributeName: 'form'}]);
+  td.verify(mockAdapter.removeClass('mdc-text-field--invalid'), {times: 0});
+});
+
 const setupBlurTest = () => {
   const {foundation, mockAdapter, helperText, label} = setupTest();
   let blur;
@@ -677,7 +701,7 @@ test('on validation attribute change calls styleValidity_', () => {
 });
 
 test('should not call styleValidity_ on non-whitelisted attribute change', () => {
-  const {foundation, mockAdapter, helperText} = setupTest();
+  const {foundation, mockAdapter} = setupTest();
   let attributeChange;
   td.when(mockAdapter.registerValidationAttributeChangeHandler(td.matchers.isA(Function)))
     .thenDo((handler) => {
diff --git a/test/unit/mdc-textfield/mdc-text-field.test.js b/test/unit/mdc-textfield/mdc-text-field.test.js
index 0ccacaf366b..0bad755daf7 100644
--- a/test/unit/mdc-textfield/mdc-text-field.test.js
+++ b/test/unit/mdc-textfield/mdc-text-field.test.js
@@ -352,16 +352,34 @@ test('#adapter.deregisterTextFieldInteractionHandler removes an event handler fo
   td.verify(handler(td.matchers.anything()));
 });
 
-test('#adapter.registerValidationAttributeChangeHandler add a mutation observer on the component input element', (done) => {
+test('#adapter.registerValidationAttributeChangeHandler creates a working mutation observer', (done) => {
   const {root, component} = setupTest();
-  component.foundation_.adapter_.registerValidationAttributeChangeHandler(handler);
-  root.classList.add('mdc-text-field--invalid');
-  assert.isOk(root.classList.contains('mdc-text-field--invalid'));
-  root.querySelector('.mdc-text-field__input').required = true;
-  setTimeout(() => {
+  const handler = td.func('ValidationAttributeChangeHandler');
+  td.when(handler(td.matchers.anything(), td.matchers.anything())).thenDo(() => {
     assert.isNotOk(root.classList.contains('mdc-text-field--invalid'));
     done();
   });
+
+  component.foundation_.adapter_.registerValidationAttributeChangeHandler(handler);
+  root.classList.add('mdc-text-field--invalid');
+  root.querySelector('.mdc-text-field__input').required = true;
+});
+
+test('#adapter.registerValidationAttributeChangeHandler adds an observer to the component', () => {
+  const {component} = setupTest();
+  const handler = td.func('ValidationAttributeChangeHandler');
+
+  component.foundation_.adapter_.registerValidationAttributeChangeHandler(handler);
+  assert.equal(component.observers_.length, 2);
+});
+
+test('#adapter.deregisterValidationAttributeChangeHandler removes observers from component', () => {
+  const {component} = setupTest();
+  const disconnect = td.func('ValidationDisconnect');
+
+  component.observers_ = [{disconnect}];
+  component.foundation_.adapter_.deregisterValidationAttributeChangeHandler();
+  td.verify(disconnect());
 });
 
 test('#adapter.getNativeInput returns the component input element', () => {

From 6080b21d68e6ae9e69914f5cca67c87ba1ebe87e Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Thu, 15 Feb 2018 14:20:32 -0800
Subject: [PATCH 13/30] fix(text-field): test syntax updates

BREAKING CHANGES: removed get/set required from MDCTextField. Should get/set from DOM input element.
---
 demos/text-field.html                      |  4 ++--
 test/unit/mdc-textfield/foundation.test.js | 12 +++---------
 2 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/demos/text-field.html b/demos/text-field.html
index add7c179f13..156710c2013 100644
--- a/demos/text-field.html
+++ b/demos/text-field.html
@@ -720,8 +720,8 @@ <h2>Full-Width Text Field and Textarea</h2>
         });
         document.getElementById('fullwidth-required').addEventListener('change', function(evt) {
           var checked = evt.target.checked;
-          toggleRequired(inputEl, evt.target.checked);
-          toggleRequired(inputMultiEl, evt.target.checked);
+          toggleRequired(inputEl, checked);
+          toggleRequired(inputMultiEl, checked);
         });
 
         document.getElementById('fullwidth-alternate-colors').addEventListener('change', function (evt) {
diff --git a/test/unit/mdc-textfield/foundation.test.js b/test/unit/mdc-textfield/foundation.test.js
index d8de8a9c12d..323535146a1 100644
--- a/test/unit/mdc-textfield/foundation.test.js
+++ b/test/unit/mdc-textfield/foundation.test.js
@@ -670,9 +670,7 @@ test('touchstart on the input sets the line ripple origin', () => {
   let clickHandler;
 
   td.when(mockAdapter.registerInputInteractionHandler('touchstart', td.matchers.isA(Function)))
-    .thenDo((evtType, handler) => {
-      clickHandler = handler;
-    });
+    .thenDo((evtType, handler) => clickHandler = handler);
 
   foundation.init();
   clickHandler(mockEvt);
@@ -684,9 +682,7 @@ test('on validation attribute change calls styleValidity_', () => {
   const {foundation, mockAdapter, helperText} = setupTest();
   let attributeChange;
   td.when(mockAdapter.registerValidationAttributeChangeHandler(td.matchers.isA(Function)))
-    .thenDo((handler) => {
-      attributeChange = handler;
-    });
+    .thenDo((handler) => attributeChange = handler);
   foundation.init();
 
   attributeChange([{attributeName: 'required'}]);
@@ -704,9 +700,7 @@ test('should not call styleValidity_ on non-whitelisted attribute change', () =>
   const {foundation, mockAdapter} = setupTest();
   let attributeChange;
   td.when(mockAdapter.registerValidationAttributeChangeHandler(td.matchers.isA(Function)))
-    .thenDo((handler) => {
-      attributeChange = handler;
-    });
+    .thenDo((handler) => attributeChange = handler);
   foundation.init();
 
   attributeChange([{attributeName: 'form'}]);

From 89f8dd0565bb53c417cb0f1a80ca610ff0a02236 Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Thu, 15 Feb 2018 15:15:53 -0800
Subject: [PATCH 14/30] refactor(text-field): inlined callback methods in tests

---
 test/unit/mdc-textfield/foundation.test.js | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/test/unit/mdc-textfield/foundation.test.js b/test/unit/mdc-textfield/foundation.test.js
index 323535146a1..c28eb2a07b2 100644
--- a/test/unit/mdc-textfield/foundation.test.js
+++ b/test/unit/mdc-textfield/foundation.test.js
@@ -486,9 +486,7 @@ test('on validation attribute change should update invalid classes', () => {
   const {foundation, mockAdapter} = setupTest();
   let attributeMutate;
   td.when(mockAdapter.registerValidationAttributeChangeHandler(td.matchers.isA(Function)))
-    .thenDo((handler) => {
-      attributeMutate = handler;
-    });
+    .thenDo((handler) => attributeMutate = handler);
   foundation.init();
   attributeMutate([{attributeName: 'required'}]);
   td.verify(mockAdapter.removeClass('mdc-text-field--invalid'));
@@ -498,9 +496,7 @@ test('on attribute change non-whitelisted should not update classes', () => {
   const {foundation, mockAdapter} = setupTest();
   let attributeMutate;
   td.when(mockAdapter.registerValidationAttributeChangeHandler(td.matchers.isA(Function)))
-    .thenDo((handler) => {
-      attributeMutate = handler;
-    });
+    .thenDo((handler) => attributeMutate = handler);
   foundation.init();
   attributeMutate([{attributeName: 'form'}]);
   td.verify(mockAdapter.removeClass('mdc-text-field--invalid'), {times: 0});

From 8dff2febebf16c56c91220e78ee16a4ae02e53e6 Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Fri, 16 Feb 2018 10:01:38 -0800
Subject: [PATCH 15/30] fix(text-field): added more tests

---
 packages/mdc-textfield/foundation.js           |  2 +-
 test/unit/mdc-textfield/foundation.test.js     | 12 +++++++++++-
 test/unit/mdc-textfield/mdc-text-field.test.js | 13 ++++++++++++-
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/packages/mdc-textfield/foundation.js b/packages/mdc-textfield/foundation.js
index ad1f03fe70a..98814a6429a 100644
--- a/packages/mdc-textfield/foundation.js
+++ b/packages/mdc-textfield/foundation.js
@@ -168,7 +168,7 @@ class MDCTextFieldFoundation extends MDCFoundation {
       'pattern', 'min', 'max', 'required', 'step', 'minlength', 'maxlength',
     ];
     mutationsList.forEach((mutation) => {
-      if (validationAttrWhitelist.includes(mutation.attributeName)) {
+      if (validationAttrWhitelist.indexOf(mutation.attributeName) > -1) {
         this.styleValidity_(true);
       }
     });
diff --git a/test/unit/mdc-textfield/foundation.test.js b/test/unit/mdc-textfield/foundation.test.js
index c28eb2a07b2..7f53bb08ac9 100644
--- a/test/unit/mdc-textfield/foundation.test.js
+++ b/test/unit/mdc-textfield/foundation.test.js
@@ -482,7 +482,7 @@ test('on focus makes helper text visible to the screen reader', () => {
   td.verify(helperText.showToScreenReader());
 });
 
-test('on validation attribute change should update invalid classes', () => {
+test('on required validation attribute change should update invalid classes', () => {
   const {foundation, mockAdapter} = setupTest();
   let attributeMutate;
   td.when(mockAdapter.registerValidationAttributeChangeHandler(td.matchers.isA(Function)))
@@ -492,6 +492,16 @@ test('on validation attribute change should update invalid classes', () => {
   td.verify(mockAdapter.removeClass('mdc-text-field--invalid'));
 });
 
+test('on pattern validation attribute change should update invalid classes', () => {
+  const {foundation, mockAdapter} = setupTest();
+  let attributeMutate;
+  td.when(mockAdapter.registerValidationAttributeChangeHandler(td.matchers.isA(Function)))
+    .thenDo((handler) => attributeMutate = handler);
+  foundation.init();
+  attributeMutate([{attributeName: 'pattern'}]);
+  td.verify(mockAdapter.removeClass('mdc-text-field--invalid'));
+});
+
 test('on attribute change non-whitelisted should not update classes', () => {
   const {foundation, mockAdapter} = setupTest();
   let attributeMutate;
diff --git a/test/unit/mdc-textfield/mdc-text-field.test.js b/test/unit/mdc-textfield/mdc-text-field.test.js
index 0bad755daf7..23708ced9c2 100644
--- a/test/unit/mdc-textfield/mdc-text-field.test.js
+++ b/test/unit/mdc-textfield/mdc-text-field.test.js
@@ -373,7 +373,7 @@ test('#adapter.registerValidationAttributeChangeHandler adds an observer to the
   assert.equal(component.observers_.length, 2);
 });
 
-test('#adapter.deregisterValidationAttributeChangeHandler removes observers from component', () => {
+test('#adapter.deregisterValidationAttributeChangeHandler disconnects observers from component', () => {
   const {component} = setupTest();
   const disconnect = td.func('ValidationDisconnect');
 
@@ -382,6 +382,17 @@ test('#adapter.deregisterValidationAttributeChangeHandler removes observers from
   td.verify(disconnect());
 });
 
+test('#adapter.deregisterValidationAttributeChangeHandler disconnects all observers on component', () => {
+  const {component} = setupTest();
+  const disconnect1 = td.func('ValidationDisconnect1');
+  const disconnect2 = td.func('ValidationDisconnect2');
+
+  component.observers_ = [{disconnect: disconnect1}, {disconnect: disconnect2}];
+  component.foundation_.adapter_.deregisterValidationAttributeChangeHandler();
+  td.verify(disconnect1());
+  td.verify(disconnect2());
+});
+
 test('#adapter.getNativeInput returns the component input element', () => {
   const {root, component} = setupTest();
   assert.equal(

From 02a0ab4cc0b7636595a4c843a78de4b2103c2f52 Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Tue, 20 Feb 2018 15:37:19 -0800
Subject: [PATCH 16/30] fix(text-field): added set/get validation props to
 component and updated demo page accordingly

---
 demos/text-field.html                         |  82 +++++---------
 packages/mdc-textfield/foundation.js          |   3 +-
 packages/mdc-textfield/index.js               | 103 ++++++++++++++++++
 test/unit/mdc-textfield/foundation.test.js    |   3 -
 .../unit/mdc-textfield/mdc-text-field.test.js |  17 ---
 5 files changed, 133 insertions(+), 75 deletions(-)

diff --git a/demos/text-field.html b/demos/text-field.html
index 156710c2013..a7767a61370 100644
--- a/demos/text-field.html
+++ b/demos/text-field.html
@@ -147,7 +147,8 @@ <h2>Outlined Text Field</h2>
             </div>
             <div class="mdc-text-field__idle-outline"></div>
           </div>
-          <p class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg" id="tf-outlined-validation-msg">
+          <p class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg"
+             id="name-validation-message">
             Helper Text (possibly validation message)
           </p>
         </div>
@@ -186,12 +187,12 @@ <h2>Text Field box</h2>
         <div id="demo-tf-box-wrapper">
           <div id="tf-box-example" class="mdc-text-field mdc-text-field--box" data-demo-no-auto-js>
             <input type="text" id="tf-box" class="mdc-text-field__input"
-                   aria-controls="name-validation-message">
+                   aria-controls="box-name-validation-message">
             <label for="tf-box" class="mdc-text-field__label">Your Name</label>
             <div class="mdc-line-ripple"></div>
           </div>
           <p class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg"
-            id="box-text-field-helper-text">
+            id="box-name-validation-message">
             Helper Text (possibly validation message)
           </p>
         </div>
@@ -378,19 +379,11 @@ <h2>Full-Width Text Field and Textarea</h2>
     <script src="/assets/material-components-web.js" async></script>
     <script>
       function toggleRequired(textfield, isRequired) {
-        if (isRequired) {
-          textfield.required = true;
-        } else {
-          textfield.required = false;
-        }
+        textfield.required = isRequired;
       }
 
       function togglePattern(textfield, checked) {
-        if (checked) {
-          textfield.pattern = '.{8,}';
-        } else {
-          textfield.pattern = '.*';
-        }
+        textfield.pattern = checked ? '.{8,}' : '.*';
       }
 
       demoReady(function() {
@@ -423,31 +416,21 @@ <h2>Full-Width Text Field and Textarea</h2>
           tf.layout();
         });
         document.getElementById('outlined-required').addEventListener('change', function(evt) {
-          toggleRequired(outlinedInputEl, evt.target.checked);
+          toggleRequired(tf, evt.target.checked);
         });
         document.getElementById('outlined-minlength').addEventListener('change', function(evt) {
-          var checked = evt.target.checked;
-          if (checked) {
-            outlinedInputEl.minLength = 8;
-          } else {
-            outlinedInputEl.minLength = 0;
-          }
+          tf.minLength = evt.target.checked ? 8 : -1;
         });
         document.getElementById('outlined-maxlength').addEventListener('change', function(evt) {
-          var checked = evt.target.checked;
-          if (checked) {
-            outlinedInputEl.maxLength = 10;
-          } else {
-            outlinedInputEl.removeAttribute('maxLength');
-          }
+          tf.maxLength = evt.target.checked ? 10 : -1;
         });
         outlinedInputEl.addEventListener('blur', function() {
           if (outlinedInputEl.validity.tooShort) {
-            tfHelperText.innerHTML = minLengthError;
+            tf.helperTextContent = minLengthError;
           } else if (outlinedInputEl.validity.tooLong) {
-            tfHelperText.innerHTML = maxLengthError;
+            tf.helperTextContent = maxLengthError;
           } else {
-            tfHelperText.innerHTML = plainHelperText;
+            tf.helperTextContent = plainHelperText;
           }
         });
       });
@@ -455,7 +438,6 @@ <h2>Full-Width Text Field and Textarea</h2>
       demoReady(function() {
         var tfEl = document.getElementById('tf-box-example');
         var tf = new mdc.textField.MDCTextField(tfEl);
-        var boxInputEl = tfEl.querySelector('input');
         var wrapper = document.getElementById('demo-tf-box-wrapper');
         var helperText = document.getElementById('box-text-field-helper-text');
 
@@ -484,14 +466,14 @@ <h2>Full-Width Text Field and Textarea</h2>
         });
 
         document.getElementById('box-required').addEventListener('change', function(evt) {
-          toggleRequired(boxInputEl, evt.target.checked);
+          toggleRequired(tf, evt.target.checked);
         });
         document.getElementById('box-pattern').addEventListener('change', function(evt) {
           var checked = evt.target.checked;
           var requiredHelperText = 'Must be at least 8 characters';
           var plainHelperText = 'Helper Text (possibly validation message)';
-          togglePattern(boxInputEl, checked);
-          helperText.innerHTML = checked ? requiredHelperText : plainHelperText;
+          togglePattern(tf, checked);
+          tf.helperTextContent = checked ? requiredHelperText : plainHelperText;
         });
 
         document.getElementById('box-use-helper-text').addEventListener('change', function(evt) {
@@ -523,22 +505,18 @@ <h2>Full-Width Text Field and Textarea</h2>
         var tfBoxLeadingEl = document.getElementById('tf-box-leading-example');
         var tfBoxLeading = new mdc.textField.MDCTextField(tfBoxLeadingEl);
         var wrapperBoxLeading = document.getElementById('demo-tf-box-leading-wrapper');
-        var tfBoxLeadingInput = tfBoxLeadingEl.querySelector('input');
 
         var tfBoxTrailingEl = document.getElementById('tf-box-trailing-example');
         var tfBoxTrailing = new mdc.textField.MDCTextField(tfBoxTrailingEl);
         var wrapperBoxTrailing = document.getElementById('demo-tf-box-trailing-wrapper');
-        var tfBoxTrailingInput = tfBoxTrailingEl.querySelector('input');
 
         var tfOutlinedLeadingEl = document.getElementById('tf-outlined-leading-example');
         var tfOutlinedLeading = new mdc.textField.MDCTextField(tfOutlinedLeadingEl);
         var wrapperOutlinedLeading = document.getElementById('demo-tf-outlined-leading-wrapper');
-        var tfOutlinedLeadingInput = tfOutlinedLeadingEl.querySelector('input');
 
         var tfOutlinedTrailingEl = document.getElementById('tf-outlined-trailing-example');
         var tfOutlinedTrailing = new mdc.textField.MDCTextField(tfOutlinedTrailingEl);
         var wrapperOutlinedTrailing = document.getElementById('demo-tf-outlined-trailing-wrapper');
-        var tfOutlinedTrailingInput = tfOutlinedTrailingEl.querySelector('input');
 
         var tfIcons = document.querySelectorAll('.mdc-text-field__icon');
         var tfInputs = tfIconContainer.querySelectorAll('.mdc-text-field__input');
@@ -587,18 +565,18 @@ <h2>Full-Width Text Field and Textarea</h2>
 
         document.getElementById('required-leading-trailing').addEventListener('change', function(evt) {
           var checked = evt.target.checked;
-          toggleRequired(tfBoxLeadingInput, checked);
-          toggleRequired(tfBoxTrailingInput, checked);
-          toggleRequired(tfOutlinedLeadingInput, checked);
-          toggleRequired(tfOutlinedTrailingInput, checked);
+          toggleRequired(tfBoxLeading, checked);
+          toggleRequired(tfBoxTrailing, checked);
+          toggleRequired(tfOutlinedLeading, checked);
+          toggleRequired(tfOutlinedTrailing, checked);
         });
 
         document.getElementById('pattern-leading-trailing').addEventListener('change', function(evt) {
           var checked = evt.target.checked;
-          togglePattern(tfBoxLeadingInput, checked);
-          togglePattern(tfBoxTrailingInput, checked);
-          togglePattern(tfOutlinedLeadingInput, checked);
-          togglePattern(tfOutlinedTrailingInput, checked);
+          togglePattern(tfBoxLeading, checked);
+          togglePattern(tfBoxTrailing, checked);
+          togglePattern(tfOutlinedLeading, checked);
+          togglePattern(tfOutlinedTrailing, checked);
         });
 
         document.getElementById('leading-trailing-alternate-colors').addEventListener('change', function(evt) {
@@ -622,7 +600,6 @@ <h2>Full-Width Text Field and Textarea</h2>
         var tfRoot = section.querySelector('.mdc-text-field');
         var helperText = section.querySelector('.mdc-text-field-helper-text');
         var tf = new mdc.textField.MDCTextField(tfRoot);
-        var inputEl = tfRoot.querySelector('input');
 
         document.getElementById('disable').addEventListener('change', function(evt) {
           var target = evt.target;
@@ -641,7 +618,7 @@ <h2>Full-Width Text Field and Textarea</h2>
           tfRoot.classList[target.checked ? 'add' : 'remove']('mdc-text-field--dense');
         });
         document.getElementById('required').addEventListener('change', function(evt) {
-          toggleRequired(inputEl, evt.target.checked);
+          toggleRequired(tf, evt.target.checked);
         });
         document.getElementById('alternate-colors').addEventListener('change', function (evt) {
           var target = evt.target;
@@ -672,8 +649,6 @@ <h2>Full-Width Text Field and Textarea</h2>
         var section = document.getElementById('demo-text-field-textarea-wrapper');
         var tfRoot = section.querySelector('.mdc-text-field');
         var tf = new mdc.textField.MDCTextField(tfRoot);
-        var inputEl = tfRoot.querySelector('textarea');
-
         document.getElementById('textarea-disable').addEventListener('change', function(evt) {
           var target = evt.target;
           tf.disabled = target.checked;
@@ -692,7 +667,7 @@ <h2>Full-Width Text Field and Textarea</h2>
           tfRoot.classList[target.checked ? 'add' : 'remove']('demo-textarea');
         });
         document.getElementById('textarea-required').addEventListener('change', function(evt) {
-          toggleRequired(inputEl, evt.target.checked);
+          toggleRequired(tf, evt.target.checked);
         });
       });
 
@@ -702,8 +677,6 @@ <h2>Full-Width Text Field and Textarea</h2>
         var tfMultiRoot = section.querySelector('.mdc-text-field--textarea');
         var tf = new mdc.textField.MDCTextField(tfRoot);
         var tfMulti = new mdc.textField.MDCTextField(tfMultiRoot);
-        var inputEl = tfRoot.querySelector('input');
-        var inputMultiEl = tfMultiRoot.querySelector('textarea');
 
         document.getElementById('fullwidth-disable').addEventListener('change', function(evt) {
           var target = evt.target;
@@ -718,10 +691,11 @@ <h2>Full-Width Text Field and Textarea</h2>
             el.classList[target.checked ? 'add' : 'remove']('mdc-text-field--dense');
           });
         });
+
         document.getElementById('fullwidth-required').addEventListener('change', function(evt) {
           var checked = evt.target.checked;
-          toggleRequired(inputEl, checked);
-          toggleRequired(inputMultiEl, checked);
+          toggleRequired(tf, checked);
+          toggleRequired(tfMulti, checked);
         });
 
         document.getElementById('fullwidth-alternate-colors').addEventListener('change', function (evt) {
diff --git a/packages/mdc-textfield/foundation.js b/packages/mdc-textfield/foundation.js
index 98814a6429a..478a0f94501 100644
--- a/packages/mdc-textfield/foundation.js
+++ b/packages/mdc-textfield/foundation.js
@@ -167,9 +167,10 @@ class MDCTextFieldFoundation extends MDCFoundation {
     const validationAttrWhitelist = [
       'pattern', 'min', 'max', 'required', 'step', 'minlength', 'maxlength',
     ];
-    mutationsList.forEach((mutation) => {
+    mutationsList.some((mutation) => {
       if (validationAttrWhitelist.indexOf(mutation.attributeName) > -1) {
         this.styleValidity_(true);
+        return true;
       }
     });
   }
diff --git a/packages/mdc-textfield/index.js b/packages/mdc-textfield/index.js
index 7fbc8ce441d..1569f28722d 100644
--- a/packages/mdc-textfield/index.js
+++ b/packages/mdc-textfield/index.js
@@ -205,6 +205,109 @@ class MDCTextField extends MDCComponent {
     this.foundation_.setValid(valid);
   }
 
+  /**
+   * @return {boolean} True if the Text Field is required.
+   */
+  get required() {
+    return this.input_.required;
+  }
+
+  /**
+   * @param {boolean} required Sets the Text Field to required.
+   */
+  set required(required) {
+    this.input_.required = required;
+  }
+
+  /**
+   * @return {string} the input element's validation pattern.
+   */
+  get pattern() {
+    return this.input_.pattern;
+  }
+
+  /**
+   * @param {string} pattern Sets the input element's validation pattern.
+   */
+  set pattern(pattern) {
+    this.input_.pattern = pattern;
+  }
+
+  /**
+   * @return {number} the input element's minLength.
+   */
+  get minLength() {
+    return this.input_.minLength;
+  }
+
+  /**
+   * @param {number} minLength Sets the input element's minLength.
+   */
+  set minLength(minLength) {
+    this.input_.minLength = minLength;
+  }
+
+  /**
+   * @return {number} the input element's maxLength.
+   */
+  get maxLength() {
+    return this.input_.maxLength;
+  }
+
+  /**
+   * @param {number} maxLength Sets the input element's maxLength.
+   */
+  set maxLength(maxLength) {
+    if (maxLength < 0) {
+      this.input_.removeAttribute('maxLength');
+    } else {
+      this.input_.maxLength = maxLength;
+    }
+  }
+
+  /**
+   * @return {string} the input element's min.
+   */
+  get min() {
+    return this.input_.min;
+  }
+
+  /**
+   * @param {string} min Sets the input element's min.
+   */
+  set min(min) {
+    this.input_.min = min;
+  }
+
+  /**
+   * @return {string} the input element's max.
+   */
+  get max() {
+    return this.input_.max;
+  }
+
+  /**
+   * @param {string} max Sets the input element's max.
+   */
+  set max(max) {
+    this.input_.max = max;
+  }
+
+
+  /**
+   * @return {string} the input element's step.
+   */
+  get step() {
+    return this.input_.step;
+  }
+
+  /**
+   * @param {string} step Sets the input element's step.
+   */
+  set step(step) {
+    this.input_.step = step;
+  }
+
   /**
    * Sets the helper text element content.
    * @param {string} content
diff --git a/test/unit/mdc-textfield/foundation.test.js b/test/unit/mdc-textfield/foundation.test.js
index 7f53bb08ac9..6f073007c55 100644
--- a/test/unit/mdc-textfield/foundation.test.js
+++ b/test/unit/mdc-textfield/foundation.test.js
@@ -196,7 +196,6 @@ test('#setValid updates classes', () => {
   td.verify(helperText.setValidity(true));
   td.verify(label.styleShake(/* isValid */ true, /* isFocused */ false));
 
-  // None of these is affected by setValid.
   td.verify(mockAdapter.addClass(cssClasses.FOCUSED), {times: 0});
   td.verify(mockAdapter.removeClass(cssClasses.FOCUSED), {times: 0});
   td.verify(mockAdapter.addClass(cssClasses.DISABLED), {times: 0});
@@ -695,7 +694,6 @@ test('on validation attribute change calls styleValidity_', () => {
   td.verify(mockAdapter.removeClass(cssClasses.INVALID));
   td.verify(helperText.setValidity(true));
 
-  // None of these is affected by setValidationAttribute.
   td.verify(mockAdapter.addClass(cssClasses.FOCUSED), {times: 0});
   td.verify(mockAdapter.removeClass(cssClasses.FOCUSED), {times: 0});
   td.verify(mockAdapter.addClass(cssClasses.DISABLED), {times: 0});
@@ -712,7 +710,6 @@ test('should not call styleValidity_ on non-whitelisted attribute change', () =>
   attributeChange([{attributeName: 'form'}]);
   td.verify(mockAdapter.removeClass(cssClasses.INVALID), {times: 0});
 
-  // None of these is affected by setValidationAttribute.
   td.verify(mockAdapter.addClass(cssClasses.FOCUSED), {times: 0});
   td.verify(mockAdapter.removeClass(cssClasses.FOCUSED), {times: 0});
   td.verify(mockAdapter.addClass(cssClasses.DISABLED), {times: 0});
diff --git a/test/unit/mdc-textfield/mdc-text-field.test.js b/test/unit/mdc-textfield/mdc-text-field.test.js
index 23708ced9c2..738232ae3c7 100644
--- a/test/unit/mdc-textfield/mdc-text-field.test.js
+++ b/test/unit/mdc-textfield/mdc-text-field.test.js
@@ -365,23 +365,6 @@ test('#adapter.registerValidationAttributeChangeHandler creates a working mutati
   root.querySelector('.mdc-text-field__input').required = true;
 });
 
-test('#adapter.registerValidationAttributeChangeHandler adds an observer to the component', () => {
-  const {component} = setupTest();
-  const handler = td.func('ValidationAttributeChangeHandler');
-
-  component.foundation_.adapter_.registerValidationAttributeChangeHandler(handler);
-  assert.equal(component.observers_.length, 2);
-});
-
-test('#adapter.deregisterValidationAttributeChangeHandler disconnects observers from component', () => {
-  const {component} = setupTest();
-  const disconnect = td.func('ValidationDisconnect');
-
-  component.observers_ = [{disconnect}];
-  component.foundation_.adapter_.deregisterValidationAttributeChangeHandler();
-  td.verify(disconnect());
-});
-
 test('#adapter.deregisterValidationAttributeChangeHandler disconnects all observers on component', () => {
   const {component} = setupTest();
   const disconnect1 = td.func('ValidationDisconnect1');

From dcada205c4d7f4c758e800d21bfeef0256ebb94b Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Wed, 21 Feb 2018 13:24:07 -0800
Subject: [PATCH 17/30] fix(text-field): add more tests

---
 .../unit/mdc-textfield/mdc-text-field.test.js | 59 ++++++++++++++++++-
 1 file changed, 57 insertions(+), 2 deletions(-)

diff --git a/test/unit/mdc-textfield/mdc-text-field.test.js b/test/unit/mdc-textfield/mdc-text-field.test.js
index 738232ae3c7..e615936b1ea 100644
--- a/test/unit/mdc-textfield/mdc-text-field.test.js
+++ b/test/unit/mdc-textfield/mdc-text-field.test.js
@@ -356,12 +356,10 @@ test('#adapter.registerValidationAttributeChangeHandler creates a working mutati
   const {root, component} = setupTest();
   const handler = td.func('ValidationAttributeChangeHandler');
   td.when(handler(td.matchers.anything(), td.matchers.anything())).thenDo(() => {
-    assert.isNotOk(root.classList.contains('mdc-text-field--invalid'));
     done();
   });
 
   component.foundation_.adapter_.registerValidationAttributeChangeHandler(handler);
-  root.classList.add('mdc-text-field--invalid');
   root.querySelector('.mdc-text-field__input').required = true;
 });
 
@@ -439,3 +437,60 @@ test('get/set valid', () => {
   component.valid = true;
   td.verify(mockFoundation.setValid(true));
 });
+
+test('get/set required', () => {
+  const {component} = setupMockFoundationTest();
+  component.required = true;
+  assert.isOk(component.required);
+  component.required = false;
+  assert.isNotOk(component.required);
+});
+
+test('get/set pattern', () => {
+  const {component} = setupMockFoundationTest();
+  component.pattern = '.{8,}';
+  assert.equal(component.pattern, '.{8,}');
+  component.pattern = '.*';
+  assert.equal(component.pattern, '.*');
+});
+
+test('get/set minLength', () => {
+  const {component} = setupMockFoundationTest();
+  component.minLength = 8;
+  assert.equal(component.minLength, 8);
+  component.minLength = 0;
+  assert.equal(component.minLength, 0);
+});
+
+test('get/set maxLength', () => {
+  const {component} = setupMockFoundationTest();
+  component.maxLength = 10;
+  assert.equal(component.maxLength, 10);
+  component.maxLength = -1;
+  assert.equal(component.maxLength, -1);
+});
+
+test('get/set min', () => {
+  const {component} = setupMockFoundationTest();
+  component.min = '8';
+  assert.equal(component.min, '8');
+  component.min = '0';
+  assert.equal(component.min, '0');
+});
+
+test('get/set max', () => {
+  const {component} = setupMockFoundationTest();
+  assert.equal(component.max, '');
+  component.max = '10';
+  assert.equal(component.max, '10');
+  component.max = '';
+  assert.equal(component.max, '');
+});
+
+test('get/set step', () => {
+  const {component} = setupMockFoundationTest();
+  component.step = '8';
+  assert.equal(component.step, '8');
+  component.step = '10';
+  assert.equal(component.step, '10');
+});

From 83adc3751128bbf1bac977c8249935d826561845 Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Wed, 21 Feb 2018 14:37:11 -0800
Subject: [PATCH 18/30] fix(text-field): update tests to use constant

---
 test/unit/mdc-textfield/foundation.test.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/test/unit/mdc-textfield/foundation.test.js b/test/unit/mdc-textfield/foundation.test.js
index 6f073007c55..27938ae2320 100644
--- a/test/unit/mdc-textfield/foundation.test.js
+++ b/test/unit/mdc-textfield/foundation.test.js
@@ -488,7 +488,7 @@ test('on required validation attribute change should update invalid classes', ()
     .thenDo((handler) => attributeMutate = handler);
   foundation.init();
   attributeMutate([{attributeName: 'required'}]);
-  td.verify(mockAdapter.removeClass('mdc-text-field--invalid'));
+  td.verify(mockAdapter.removeClass(cssClasses.INVALID));
 });
 
 test('on pattern validation attribute change should update invalid classes', () => {
@@ -498,7 +498,7 @@ test('on pattern validation attribute change should update invalid classes', ()
     .thenDo((handler) => attributeMutate = handler);
   foundation.init();
   attributeMutate([{attributeName: 'pattern'}]);
-  td.verify(mockAdapter.removeClass('mdc-text-field--invalid'));
+  td.verify(mockAdapter.removeClass(cssClasses.INVALID));
 });
 
 test('on attribute change non-whitelisted should not update classes', () => {
@@ -508,7 +508,7 @@ test('on attribute change non-whitelisted should not update classes', () => {
     .thenDo((handler) => attributeMutate = handler);
   foundation.init();
   attributeMutate([{attributeName: 'form'}]);
-  td.verify(mockAdapter.removeClass('mdc-text-field--invalid'), {times: 0});
+  td.verify(mockAdapter.removeClass(cssClasses.INVALID), {times: 0});
 });
 
 const setupBlurTest = () => {

From d1770474153ec4a8323277521fb42ae7e4681660 Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Thu, 22 Feb 2018 15:23:43 -0800
Subject: [PATCH 19/30] fix(text-field): maxlength ie11 test

---
 test/unit/mdc-textfield/mdc-text-field.test.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/test/unit/mdc-textfield/mdc-text-field.test.js b/test/unit/mdc-textfield/mdc-text-field.test.js
index e615936b1ea..6d68ef444a4 100644
--- a/test/unit/mdc-textfield/mdc-text-field.test.js
+++ b/test/unit/mdc-textfield/mdc-text-field.test.js
@@ -462,12 +462,13 @@ test('get/set minLength', () => {
   assert.equal(component.minLength, 0);
 });
 
-test('get/set maxLength', () => {
+test.only('get/set maxLength', () => {
   const {component} = setupMockFoundationTest();
   component.maxLength = 10;
   assert.equal(component.maxLength, 10);
   component.maxLength = -1;
-  assert.equal(component.maxLength, -1);
+  // need to check maxLength === 2147483647 is specifically for IE11 
+  assert.isTrue(component.maxLength === -1 || component.maxLength === 2147483647);
 });
 
 test('get/set min', () => {

From 05e8c3f8651abf968e9ecfe8d5aa518f532fc159 Mon Sep 17 00:00:00 2001
From: Matty Goo <mattgoo@google.com>
Date: Thu, 22 Feb 2018 15:45:11 -0800
Subject: [PATCH 20/30] fix(text-field): updated maxlength test

---
 test/unit/mdc-textfield/mdc-text-field.test.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/unit/mdc-textfield/mdc-text-field.test.js b/test/unit/mdc-textfield/mdc-text-field.test.js
index 6d68ef444a4..f7a71695e5b 100644
--- a/test/unit/mdc-textfield/mdc-text-field.test.js
+++ b/test/unit/mdc-textfield/mdc-text-field.test.js
@@ -467,8 +467,8 @@ test.only('get/set maxLength', () => {
   component.maxLength = 10;
   assert.equal(component.maxLength, 10);
   component.maxLength = -1;
-  // need to check maxLength === 2147483647 is specifically for IE11 
-  assert.isTrue(component.maxLength === -1 || component.maxLength === 2147483647);
+  // IE11 has a different value for no maxlength property
+  assert.isFalse(component.maxLength === 10);
 });
 
 test('get/set min', () => {

From 52f282de3cd440e1319f750e78aeea021e90803c Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Thu, 22 Feb 2018 16:03:55 -0800
Subject: [PATCH 21/30] fix(text-field): remove .only

---
 test/unit/mdc-textfield/mdc-text-field.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/unit/mdc-textfield/mdc-text-field.test.js b/test/unit/mdc-textfield/mdc-text-field.test.js
index f7a71695e5b..1ceee8dba4a 100644
--- a/test/unit/mdc-textfield/mdc-text-field.test.js
+++ b/test/unit/mdc-textfield/mdc-text-field.test.js
@@ -462,7 +462,7 @@ test('get/set minLength', () => {
   assert.equal(component.minLength, 0);
 });
 
-test.only('get/set maxLength', () => {
+test('get/set maxLength', () => {
   const {component} = setupMockFoundationTest();
   component.maxLength = 10;
   assert.equal(component.maxLength, 10);

From 094fae819739ec9a5bbfabffbb039436aa7dfcf7 Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Fri, 23 Feb 2018 11:27:48 -0800
Subject: [PATCH 22/30] fix(text-field): demo helper text and typos

---
 demos/text-field.html                         |  8 +--
 package-lock.json                             | 70 ++++++++-----------
 packages/mdc-textfield/adapter.js             |  2 +-
 packages/mdc-textfield/foundation.js          | 13 ++--
 packages/mdc-textfield/index.js               | 13 ++--
 test/unit/mdc-textfield/foundation.test.js    | 33 +--------
 .../unit/mdc-textfield/mdc-text-field.test.js |  4 +-
 7 files changed, 53 insertions(+), 90 deletions(-)

diff --git a/demos/text-field.html b/demos/text-field.html
index a7767a61370..40c1c4f3df3 100644
--- a/demos/text-field.html
+++ b/demos/text-field.html
@@ -178,7 +178,7 @@ <h2>Outlined Text Field</h2>
         </div>
         <div>
           <input id="outlined-maxlength" type="checkbox">
-          <label for="outlined-maxlength">Limit to 10 characters</label>
+          <label for="outlined-maxlength">Must not exceed 10 characters</label>
         </div>
       </section>
 
@@ -394,7 +394,7 @@ <h2>Full-Width Text Field and Textarea</h2>
         var wrapper = document.getElementById('demo-tf-outlined-wrapper');
         var plainHelperText = 'Helper Text (possibly validation message)';
         var minLengthError = 'Must be at least 8 characters';
-        var maxLengthError = 'Limit to 10 characters';
+        var maxLengthError = 'Must not exceed 10 characters';
 
         document.getElementById('outlined-disable').addEventListener('change', function(evt) {
           tf.disabled = evt.target.checked;
@@ -419,7 +419,7 @@ <h2>Full-Width Text Field and Textarea</h2>
           toggleRequired(tf, evt.target.checked);
         });
         document.getElementById('outlined-minlength').addEventListener('change', function(evt) {
-          tf.minLength = evt.target.checked ? 8 : -1;
+          tf.minLength = evt.target.checked ? 8 : 0;
         });
         document.getElementById('outlined-maxlength').addEventListener('change', function(evt) {
           tf.maxLength = evt.target.checked ? 10 : -1;
@@ -439,7 +439,7 @@ <h2>Full-Width Text Field and Textarea</h2>
         var tfEl = document.getElementById('tf-box-example');
         var tf = new mdc.textField.MDCTextField(tfEl);
         var wrapper = document.getElementById('demo-tf-box-wrapper');
-        var helperText = document.getElementById('box-text-field-helper-text');
+        var helperText = document.getElementById('box-name-validation-message');
 
         document.getElementById('box-disable').addEventListener('change', function(evt) {
           tf.disabled = evt.target.checked;
diff --git a/package-lock.json b/package-lock.json
index bef54bc4c46..723fa575ab8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1368,9 +1368,9 @@
       "integrity": "sha1-+GzWzvT1MAyOY+B6TVEvZfv/RTE=",
       "dev": true,
       "requires": {
+        "JSONStream": "1.3.1",
         "combine-source-map": "0.7.2",
         "defined": "1.0.0",
-        "JSONStream": "1.3.1",
         "through2": "2.0.3",
         "umd": "3.0.1"
       }
@@ -1404,6 +1404,7 @@
       "integrity": "sha512-gKfOsNQv/toWz+60nSPfYzuwSEdzvV2WdxrVPUbPD/qui44rAkB3t3muNtmmGYHqrG56FGwX9SUEQmzNLAeS7g==",
       "dev": true,
       "requires": {
+        "JSONStream": "1.3.1",
         "assert": "1.4.1",
         "browser-pack": "6.0.2",
         "browser-resolve": "1.11.2",
@@ -1425,7 +1426,6 @@
         "https-browserify": "1.0.0",
         "inherits": "2.0.3",
         "insert-module-globals": "7.0.1",
-        "JSONStream": "1.3.1",
         "labeled-stream-splicer": "2.0.0",
         "module-deps": "4.1.1",
         "os-browserify": "0.3.0",
@@ -2552,8 +2552,8 @@
       "integrity": "sha512-8od6g684Fhi5Vpp4ABRv/RBsW1AY6wSHbJHEK6FGTv+8jvAAnlABniZu/FVmX9TcirkHepaEsa1QGkRvbg0CKw==",
       "dev": true,
       "requires": {
-        "is-text-path": "1.0.1",
         "JSONStream": "1.3.1",
+        "is-text-path": "1.0.1",
         "lodash": "4.17.4",
         "meow": "3.7.0",
         "split2": "2.2.0",
@@ -5183,14 +5183,6 @@
             }
           }
         },
-        "string_decoder": {
-          "version": "1.0.1",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "safe-buffer": "5.0.1"
-          }
-        },
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
@@ -5201,6 +5193,14 @@
             "strip-ansi": "3.0.1"
           }
         },
+        "string_decoder": {
+          "version": "1.0.1",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "safe-buffer": "5.0.1"
+          }
+        },
         "stringstream": {
           "version": "0.0.5",
           "bundled": true,
@@ -6276,10 +6276,10 @@
       "integrity": "sha1-wDv04BywhtW15azorQr+eInWOMM=",
       "dev": true,
       "requires": {
+        "JSONStream": "1.3.1",
         "combine-source-map": "0.7.2",
         "concat-stream": "1.5.2",
         "is-buffer": "1.1.5",
-        "JSONStream": "1.3.1",
         "lexical-scope": "1.2.0",
         "process": "0.11.10",
         "through2": "2.0.3",
@@ -6971,16 +6971,6 @@
       "integrity": "sha1-T9kss04OnbPInIYi7PUfm5eMbLk=",
       "dev": true
     },
-    "JSONStream": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-1.3.1.tgz",
-      "integrity": "sha1-cH92HgHa6eFvG8+TcDt4xwlmV5o=",
-      "dev": true,
-      "requires": {
-        "jsonparse": "1.3.1",
-        "through": "2.3.8"
-      }
-    },
     "jsprim": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.0.tgz",
@@ -8244,6 +8234,7 @@
       "integrity": "sha1-IyFYM/HaE/1gbMuAh7RIUty4If0=",
       "dev": true,
       "requires": {
+        "JSONStream": "1.3.1",
         "browser-resolve": "1.11.2",
         "cached-path-relative": "1.0.1",
         "concat-stream": "1.5.2",
@@ -8251,7 +8242,6 @@
         "detective": "4.7.1",
         "duplexer2": "0.1.4",
         "inherits": "2.0.3",
-        "JSONStream": "1.3.1",
         "parents": "1.0.1",
         "readable-stream": "2.2.9",
         "resolve": "1.3.3",
@@ -12100,23 +12090,6 @@
       "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
       "dev": true
     },
-    "string_decoder": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
-      "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
-      "dev": true,
-      "requires": {
-        "safe-buffer": "5.1.1"
-      },
-      "dependencies": {
-        "safe-buffer": {
-          "version": "5.1.1",
-          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz",
-          "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==",
-          "dev": true
-        }
-      }
-    },
     "string-width": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.0.0.tgz",
@@ -12138,6 +12111,23 @@
         "function-bind": "1.1.0"
       }
     },
+    "string_decoder": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
+      "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "5.1.1"
+      },
+      "dependencies": {
+        "safe-buffer": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz",
+          "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==",
+          "dev": true
+        }
+      }
+    },
     "stringify-entities": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-1.3.1.tgz",
diff --git a/packages/mdc-textfield/adapter.js b/packages/mdc-textfield/adapter.js
index 0adb3eeab02..5c7c40d0e31 100644
--- a/packages/mdc-textfield/adapter.js
+++ b/packages/mdc-textfield/adapter.js
@@ -113,7 +113,7 @@ class MDCTextFieldAdapter {
   registerValidationAttributeChangeHandler(handler) {}
 
   /**
-   * Disconnect all validation attrinute listeners on the input element.
+   * Disconnect all validation attribute listeners on the input element.
    */
   deregisterValidationAttributeChangeHandler() {}
 
diff --git a/packages/mdc-textfield/foundation.js b/packages/mdc-textfield/foundation.js
index 478a0f94501..fceb31d5dd4 100644
--- a/packages/mdc-textfield/foundation.js
+++ b/packages/mdc-textfield/foundation.js
@@ -27,6 +27,12 @@ import MDCTextFieldOutlineFoundation from './outline/foundation';
 import {cssClasses, strings, numbers} from './constants';
 
 
+// whitelist based off of https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation
+// under section: `Validation-related attributes`
+const VALIDATION_ATTR_WHITELIST = [
+  'pattern', 'min', 'max', 'required', 'step', 'minlength', 'maxlength',
+];
+
 /**
  * @extends {MDCFoundation<!MDCTextFieldAdapter>}
  * @final
@@ -162,13 +168,8 @@ class MDCTextFieldFoundation extends MDCFoundation {
    * Handles validation attribute changes
    */
   handleValidationAttributeMutation(mutationsList) {
-    // whitelist based off of https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation
-    // under section: `Validation-related attributes`
-    const validationAttrWhitelist = [
-      'pattern', 'min', 'max', 'required', 'step', 'minlength', 'maxlength',
-    ];
     mutationsList.some((mutation) => {
-      if (validationAttrWhitelist.indexOf(mutation.attributeName) > -1) {
+      if (VALIDATION_ATTR_WHITELIST.indexOf(mutation.attributeName) > -1) {
         this.styleValidity_(true);
         return true;
       }
diff --git a/packages/mdc-textfield/index.js b/packages/mdc-textfield/index.js
index 1569f28722d..8d618c33ab3 100644
--- a/packages/mdc-textfield/index.js
+++ b/packages/mdc-textfield/index.js
@@ -220,7 +220,7 @@ class MDCTextField extends MDCComponent {
   }
 
   /**
-   * @return {string} the input element's validation pattern.
+   * @return {string} The input element's validation pattern.
    */
   get pattern() {
     return this.input_.pattern;
@@ -234,7 +234,7 @@ class MDCTextField extends MDCComponent {
   }
 
   /**
-   * @return {number} the input element's minLength.
+   * @return {number} The input element's minLength.
    */
   get minLength() {
     return this.input_.minLength;
@@ -248,7 +248,7 @@ class MDCTextField extends MDCComponent {
   }
 
   /**
-   * @return {number} the input element's maxLength.
+   * @return {number} The input element's maxLength.
    */
   get maxLength() {
     return this.input_.maxLength;
@@ -258,6 +258,7 @@ class MDCTextField extends MDCComponent {
    * @param {number} maxLength Sets the input element's maxLength.
    */
   set maxLength(maxLength) {
+    // Chrome throws error if maxLength is set < 0
     if (maxLength < 0) {
       this.input_.removeAttribute('maxLength');
     } else {
@@ -266,7 +267,7 @@ class MDCTextField extends MDCComponent {
   }
 
   /**
-   * @return {string} the input element's min.
+   * @return {string} The input element's min.
    */
   get min() {
     return this.input_.min;
@@ -280,7 +281,7 @@ class MDCTextField extends MDCComponent {
   }
 
   /**
-   * @return {string} the input element's max.
+   * @return {string} The input element's max.
    */
   get max() {
     return this.input_.max;
@@ -295,7 +296,7 @@ class MDCTextField extends MDCComponent {
 
 
   /**
-   * @return {string} the input element's step.
+   * @return {string} The input element's step.
    */
   get step() {
     return this.input_.step;
diff --git a/test/unit/mdc-textfield/foundation.test.js b/test/unit/mdc-textfield/foundation.test.js
index 27938ae2320..6cb378ae12c 100644
--- a/test/unit/mdc-textfield/foundation.test.js
+++ b/test/unit/mdc-textfield/foundation.test.js
@@ -481,36 +481,6 @@ test('on focus makes helper text visible to the screen reader', () => {
   td.verify(helperText.showToScreenReader());
 });
 
-test('on required validation attribute change should update invalid classes', () => {
-  const {foundation, mockAdapter} = setupTest();
-  let attributeMutate;
-  td.when(mockAdapter.registerValidationAttributeChangeHandler(td.matchers.isA(Function)))
-    .thenDo((handler) => attributeMutate = handler);
-  foundation.init();
-  attributeMutate([{attributeName: 'required'}]);
-  td.verify(mockAdapter.removeClass(cssClasses.INVALID));
-});
-
-test('on pattern validation attribute change should update invalid classes', () => {
-  const {foundation, mockAdapter} = setupTest();
-  let attributeMutate;
-  td.when(mockAdapter.registerValidationAttributeChangeHandler(td.matchers.isA(Function)))
-    .thenDo((handler) => attributeMutate = handler);
-  foundation.init();
-  attributeMutate([{attributeName: 'pattern'}]);
-  td.verify(mockAdapter.removeClass(cssClasses.INVALID));
-});
-
-test('on attribute change non-whitelisted should not update classes', () => {
-  const {foundation, mockAdapter} = setupTest();
-  let attributeMutate;
-  td.when(mockAdapter.registerValidationAttributeChangeHandler(td.matchers.isA(Function)))
-    .thenDo((handler) => attributeMutate = handler);
-  foundation.init();
-  attributeMutate([{attributeName: 'form'}]);
-  td.verify(mockAdapter.removeClass(cssClasses.INVALID), {times: 0});
-});
-
 const setupBlurTest = () => {
   const {foundation, mockAdapter, helperText, label} = setupTest();
   let blur;
@@ -701,7 +671,7 @@ test('on validation attribute change calls styleValidity_', () => {
 });
 
 test('should not call styleValidity_ on non-whitelisted attribute change', () => {
-  const {foundation, mockAdapter} = setupTest();
+  const {foundation, mockAdapter, helperText} = setupTest();
   let attributeChange;
   td.when(mockAdapter.registerValidationAttributeChangeHandler(td.matchers.isA(Function)))
     .thenDo((handler) => attributeChange = handler);
@@ -709,6 +679,7 @@ test('should not call styleValidity_ on non-whitelisted attribute change', () =>
 
   attributeChange([{attributeName: 'form'}]);
   td.verify(mockAdapter.removeClass(cssClasses.INVALID), {times: 0});
+  td.verify(helperText.setValidity(td.matchers.isA(Boolean)), {times: 0});
 
   td.verify(mockAdapter.addClass(cssClasses.FOCUSED), {times: 0});
   td.verify(mockAdapter.removeClass(cssClasses.FOCUSED), {times: 0});
diff --git a/test/unit/mdc-textfield/mdc-text-field.test.js b/test/unit/mdc-textfield/mdc-text-field.test.js
index 1ceee8dba4a..a5136179ec4 100644
--- a/test/unit/mdc-textfield/mdc-text-field.test.js
+++ b/test/unit/mdc-textfield/mdc-text-field.test.js
@@ -441,9 +441,9 @@ test('get/set valid', () => {
 test('get/set required', () => {
   const {component} = setupMockFoundationTest();
   component.required = true;
-  assert.isOk(component.required);
+  assert.isTrue(component.required);
   component.required = false;
-  assert.isNotOk(component.required);
+  assert.isFalse(component.required);
 });
 
 test('get/set pattern', () => {

From f6035ea54e5833b398cf8dc069c7a09d5ba60a5c Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Fri, 23 Feb 2018 11:36:20 -0800
Subject: [PATCH 23/30] fix(text-field): remove extra line

BREAKING CHANGE: removed isRequired and setRequired from text-field foundation
---
 packages/mdc-textfield/index.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/mdc-textfield/index.js b/packages/mdc-textfield/index.js
index 8d618c33ab3..f87af029d2d 100644
--- a/packages/mdc-textfield/index.js
+++ b/packages/mdc-textfield/index.js
@@ -258,7 +258,7 @@ class MDCTextField extends MDCComponent {
    * @param {number} maxLength Sets the input element's maxLength.
    */
   set maxLength(maxLength) {
-    // Chrome throws error if maxLength is set < 0
+    // Chrome throws exception if maxLength is set < 0
     if (maxLength < 0) {
       this.input_.removeAttribute('maxLength');
     } else {
@@ -294,7 +294,6 @@ class MDCTextField extends MDCComponent {
     this.input_.max = max;
   }
 
-
   /**
    * @return {string} The input element's step.
    */

From a79696dd20a4bfe75abc0df87f4ade6e77484119 Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Fri, 23 Feb 2018 12:44:21 -0800
Subject: [PATCH 24/30] fix(text-field): fixed demo page helper text hide/show

---
 demos/text-field.html                         |  3 +-
 package-lock.json                             | 70 +++++++++++--------
 .../unit/mdc-textfield/mdc-text-field.test.js |  4 +-
 3 files changed, 44 insertions(+), 33 deletions(-)

diff --git a/demos/text-field.html b/demos/text-field.html
index 40c1c4f3df3..1fdef8aac92 100644
--- a/demos/text-field.html
+++ b/demos/text-field.html
@@ -192,7 +192,8 @@ <h2>Text Field box</h2>
             <div class="mdc-line-ripple"></div>
           </div>
           <p class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg"
-            id="box-name-validation-message">
+            id="box-name-validation-message"
+            style="display: none;">
             Helper Text (possibly validation message)
           </p>
         </div>
diff --git a/package-lock.json b/package-lock.json
index 723fa575ab8..bef54bc4c46 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1368,9 +1368,9 @@
       "integrity": "sha1-+GzWzvT1MAyOY+B6TVEvZfv/RTE=",
       "dev": true,
       "requires": {
-        "JSONStream": "1.3.1",
         "combine-source-map": "0.7.2",
         "defined": "1.0.0",
+        "JSONStream": "1.3.1",
         "through2": "2.0.3",
         "umd": "3.0.1"
       }
@@ -1404,7 +1404,6 @@
       "integrity": "sha512-gKfOsNQv/toWz+60nSPfYzuwSEdzvV2WdxrVPUbPD/qui44rAkB3t3muNtmmGYHqrG56FGwX9SUEQmzNLAeS7g==",
       "dev": true,
       "requires": {
-        "JSONStream": "1.3.1",
         "assert": "1.4.1",
         "browser-pack": "6.0.2",
         "browser-resolve": "1.11.2",
@@ -1426,6 +1425,7 @@
         "https-browserify": "1.0.0",
         "inherits": "2.0.3",
         "insert-module-globals": "7.0.1",
+        "JSONStream": "1.3.1",
         "labeled-stream-splicer": "2.0.0",
         "module-deps": "4.1.1",
         "os-browserify": "0.3.0",
@@ -2552,8 +2552,8 @@
       "integrity": "sha512-8od6g684Fhi5Vpp4ABRv/RBsW1AY6wSHbJHEK6FGTv+8jvAAnlABniZu/FVmX9TcirkHepaEsa1QGkRvbg0CKw==",
       "dev": true,
       "requires": {
-        "JSONStream": "1.3.1",
         "is-text-path": "1.0.1",
+        "JSONStream": "1.3.1",
         "lodash": "4.17.4",
         "meow": "3.7.0",
         "split2": "2.2.0",
@@ -5183,22 +5183,22 @@
             }
           }
         },
-        "string-width": {
-          "version": "1.0.2",
+        "string_decoder": {
+          "version": "1.0.1",
           "bundled": true,
           "dev": true,
           "requires": {
-            "code-point-at": "1.1.0",
-            "is-fullwidth-code-point": "1.0.0",
-            "strip-ansi": "3.0.1"
+            "safe-buffer": "5.0.1"
           }
         },
-        "string_decoder": {
-          "version": "1.0.1",
+        "string-width": {
+          "version": "1.0.2",
           "bundled": true,
           "dev": true,
           "requires": {
-            "safe-buffer": "5.0.1"
+            "code-point-at": "1.1.0",
+            "is-fullwidth-code-point": "1.0.0",
+            "strip-ansi": "3.0.1"
           }
         },
         "stringstream": {
@@ -6276,10 +6276,10 @@
       "integrity": "sha1-wDv04BywhtW15azorQr+eInWOMM=",
       "dev": true,
       "requires": {
-        "JSONStream": "1.3.1",
         "combine-source-map": "0.7.2",
         "concat-stream": "1.5.2",
         "is-buffer": "1.1.5",
+        "JSONStream": "1.3.1",
         "lexical-scope": "1.2.0",
         "process": "0.11.10",
         "through2": "2.0.3",
@@ -6971,6 +6971,16 @@
       "integrity": "sha1-T9kss04OnbPInIYi7PUfm5eMbLk=",
       "dev": true
     },
+    "JSONStream": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-1.3.1.tgz",
+      "integrity": "sha1-cH92HgHa6eFvG8+TcDt4xwlmV5o=",
+      "dev": true,
+      "requires": {
+        "jsonparse": "1.3.1",
+        "through": "2.3.8"
+      }
+    },
     "jsprim": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.0.tgz",
@@ -8234,7 +8244,6 @@
       "integrity": "sha1-IyFYM/HaE/1gbMuAh7RIUty4If0=",
       "dev": true,
       "requires": {
-        "JSONStream": "1.3.1",
         "browser-resolve": "1.11.2",
         "cached-path-relative": "1.0.1",
         "concat-stream": "1.5.2",
@@ -8242,6 +8251,7 @@
         "detective": "4.7.1",
         "duplexer2": "0.1.4",
         "inherits": "2.0.3",
+        "JSONStream": "1.3.1",
         "parents": "1.0.1",
         "readable-stream": "2.2.9",
         "resolve": "1.3.3",
@@ -12090,6 +12100,23 @@
       "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
       "dev": true
     },
+    "string_decoder": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
+      "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "5.1.1"
+      },
+      "dependencies": {
+        "safe-buffer": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz",
+          "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==",
+          "dev": true
+        }
+      }
+    },
     "string-width": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.0.0.tgz",
@@ -12111,23 +12138,6 @@
         "function-bind": "1.1.0"
       }
     },
-    "string_decoder": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
-      "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
-      "dev": true,
-      "requires": {
-        "safe-buffer": "5.1.1"
-      },
-      "dependencies": {
-        "safe-buffer": {
-          "version": "5.1.1",
-          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz",
-          "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==",
-          "dev": true
-        }
-      }
-    },
     "stringify-entities": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-1.3.1.tgz",
diff --git a/test/unit/mdc-textfield/mdc-text-field.test.js b/test/unit/mdc-textfield/mdc-text-field.test.js
index a5136179ec4..d04ef7ccd69 100644
--- a/test/unit/mdc-textfield/mdc-text-field.test.js
+++ b/test/unit/mdc-textfield/mdc-text-field.test.js
@@ -467,8 +467,8 @@ test('get/set maxLength', () => {
   component.maxLength = 10;
   assert.equal(component.maxLength, 10);
   component.maxLength = -1;
-  // IE11 has a different value for no maxlength property
-  assert.isFalse(component.maxLength === 10);
+  // IE11 has a different value for no maxLength property
+  assert.notEqual(component.maxLength, 10);
 });
 
 test('get/set min', () => {

From 28e25af3a4e55a89bab350d1eba607f555f6200a Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Mon, 26 Feb 2018 22:44:28 -0500
Subject: [PATCH 25/30] fix(text-field): updated text-field box demo to be
 consistent with top text-field

---
 demos/text-field.html | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/demos/text-field.html b/demos/text-field.html
index 1fdef8aac92..bc11a7268d1 100644
--- a/demos/text-field.html
+++ b/demos/text-field.html
@@ -191,7 +191,7 @@ <h2>Text Field box</h2>
             <label for="tf-box" class="mdc-text-field__label">Your Name</label>
             <div class="mdc-line-ripple"></div>
           </div>
-          <p class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg"
+          <p class="mdc-text-field-helper-text"
             id="box-name-validation-message"
             style="display: none;">
             Helper Text (possibly validation message)
@@ -229,6 +229,12 @@ <h2>Text Field box</h2>
           <input id="box-persistent-helper-text" type="checkbox" disabled>
           <label for="box-persistent-helper-text">Make helper text persistent</label>
         </div>
+        <div>
+          <input id="box-helper-text-as-validation" type="checkbox" disabled>
+          <label for="box-helper-text-as-validation">
+            Use helper text as validation message
+          </label>
+        </div>
       </section>
 
       <section class="example" id="demo-tf-icon-container">
@@ -481,6 +487,7 @@ <h2>Full-Width Text Field and Textarea</h2>
           var target = evt.target;
           helperText.style.display = target.checked ? 'block' : 'none';
           document.getElementById('box-persistent-helper-text').disabled = !target.checked;
+          document.getElementById('box-helper-text-as-validation').disabled = !target.checked;
         });
 
         document.getElementById('box-persistent-helper-text').addEventListener('change', function(evt) {
@@ -489,6 +496,13 @@ <h2>Full-Width Text Field and Textarea</h2>
             'mdc-text-field-helper-text--persistent'
           );
         });
+
+        document.getElementById('box-helper-text-as-validation').addEventListener('change', function(evt) {
+          var target = evt.target;
+          helperText.classList[target.checked ? 'add' : 'remove'](
+            'mdc-text-field-helper-text--validation-msg'
+          );
+        });
       });
 
       demoReady(function() {

From 1d61de0bdfa0a2aa05b3dbe5dae4fff7bd53a447 Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Wed, 28 Feb 2018 11:38:06 -0500
Subject: [PATCH 26/30] fix(text-field): changed
 deregisterValidationAttributeChangeHanlder to accept observer

---
 packages/mdc-textfield/foundation.js           |  6 ++++--
 packages/mdc-textfield/index.js                | 11 ++++++-----
 test/unit/mdc-textfield/foundation.test.js     |  3 ++-
 test/unit/mdc-textfield/mdc-text-field.test.js | 12 +++++-------
 4 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/packages/mdc-textfield/foundation.js b/packages/mdc-textfield/foundation.js
index fceb31d5dd4..522c7592006 100644
--- a/packages/mdc-textfield/foundation.js
+++ b/packages/mdc-textfield/foundation.js
@@ -114,6 +114,8 @@ class MDCTextFieldFoundation extends MDCFoundation {
     this.textFieldInteractionHandler_ = () => this.handleTextFieldInteraction();
     /** @private {function(!Array): undefined} */
     this.validationAttributeChangeHandler_ = (mutations) => this.handleValidationAttributeMutation(mutations);
+    /** @private {MutationObserver} */
+    this.validationObserver_ = null;
   }
 
   init() {
@@ -137,7 +139,7 @@ class MDCTextFieldFoundation extends MDCFoundation {
     ['click', 'keydown'].forEach((evtType) => {
       this.adapter_.registerTextFieldInteractionHandler(evtType, this.textFieldInteractionHandler_);
     });
-    this.adapter_.registerValidationAttributeChangeHandler(this.validationAttributeChangeHandler_);
+    this.validationObserver_ = this.adapter_.registerValidationAttributeChangeHandler(this.validationAttributeChangeHandler_);
   }
 
   destroy() {
@@ -151,7 +153,7 @@ class MDCTextFieldFoundation extends MDCFoundation {
     ['click', 'keydown'].forEach((evtType) => {
       this.adapter_.deregisterTextFieldInteractionHandler(evtType, this.textFieldInteractionHandler_);
     });
-    this.adapter_.deregisterValidationAttributeChangeHandler();
+    this.adapter_.deregisterValidationAttributeChangeHandler(this.validationObserver_);
   }
 
   /**
diff --git a/packages/mdc-textfield/index.js b/packages/mdc-textfield/index.js
index f87af029d2d..11a246d947c 100644
--- a/packages/mdc-textfield/index.js
+++ b/packages/mdc-textfield/index.js
@@ -57,8 +57,6 @@ class MDCTextField extends MDCComponent {
     this.label_;
     /** @private {?MDCTextFieldOutline} */
     this.outline_;
-    /** @private {?Array<MutationObserver>} */
-    this.observers_;
   }
 
   /**
@@ -130,7 +128,6 @@ class MDCTextField extends MDCComponent {
       const foundation = new MDCRippleFoundation(adapter);
       this.ripple = rippleFactory(rippleRoot, foundation);
     }
-    this.observers_ = [];
   }
 
   destroy() {
@@ -345,9 +342,13 @@ class MDCTextField extends MDCComponent {
           const targetNode = this.root_.querySelector(strings.INPUT_SELECTOR);
           const config = {attributes: true};
           observer.observe(targetNode, config);
-          this.observers_.push(observer);
+          return observer;
+        },
+        deregisterValidationAttributeChangeHandler: (observer) => {
+          if (observer) {
+            observer.disconnect();
+          }
         },
-        deregisterValidationAttributeChangeHandler: () => this.observers_.forEach((observer) => observer.disconnect()),
         isFocused: () => {
           return document.activeElement === this.root_.querySelector(strings.INPUT_SELECTOR);
         },
diff --git a/test/unit/mdc-textfield/foundation.test.js b/test/unit/mdc-textfield/foundation.test.js
index 6cb378ae12c..0dfeaa12b9e 100644
--- a/test/unit/mdc-textfield/foundation.test.js
+++ b/test/unit/mdc-textfield/foundation.test.js
@@ -302,6 +302,7 @@ test('#init adds event listeners', () => {
 
 test('#destroy removes event listeners', () => {
   const {foundation, mockAdapter} = setupTest();
+  foundation.validationObserver_ = {test: 'test1'};
   foundation.destroy();
 
   td.verify(mockAdapter.deregisterInputInteractionHandler('focus', td.matchers.isA(Function)));
@@ -311,7 +312,7 @@ test('#destroy removes event listeners', () => {
   td.verify(mockAdapter.deregisterInputInteractionHandler('touchstart', td.matchers.isA(Function)));
   td.verify(mockAdapter.deregisterTextFieldInteractionHandler('click', td.matchers.isA(Function)));
   td.verify(mockAdapter.deregisterTextFieldInteractionHandler('keydown', td.matchers.isA(Function)));
-  td.verify(mockAdapter.deregisterValidationAttributeChangeHandler());
+  td.verify(mockAdapter.deregisterValidationAttributeChangeHandler(foundation.validationObserver_));
 });
 
 test('#init floats label if the input contains a value', () => {
diff --git a/test/unit/mdc-textfield/mdc-text-field.test.js b/test/unit/mdc-textfield/mdc-text-field.test.js
index d04ef7ccd69..696287e9731 100644
--- a/test/unit/mdc-textfield/mdc-text-field.test.js
+++ b/test/unit/mdc-textfield/mdc-text-field.test.js
@@ -363,15 +363,13 @@ test('#adapter.registerValidationAttributeChangeHandler creates a working mutati
   root.querySelector('.mdc-text-field__input').required = true;
 });
 
-test('#adapter.deregisterValidationAttributeChangeHandler disconnects all observers on component', () => {
+test('#adapter.deregisterValidationAttributeChangeHandler disconnects the passed observer', () => {
   const {component} = setupTest();
-  const disconnect1 = td.func('ValidationDisconnect1');
-  const disconnect2 = td.func('ValidationDisconnect2');
+  const disconnect = td.func('ValidationDisconnect');
+  const observer = {disconnect};
 
-  component.observers_ = [{disconnect: disconnect1}, {disconnect: disconnect2}];
-  component.foundation_.adapter_.deregisterValidationAttributeChangeHandler();
-  td.verify(disconnect1());
-  td.verify(disconnect2());
+  component.foundation_.adapter_.deregisterValidationAttributeChangeHandler(observer);
+  td.verify(disconnect());
 });
 
 test('#adapter.getNativeInput returns the component input element', () => {

From 849dbc9daf58b1e3107b5fba816246d250fe2329 Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Wed, 28 Feb 2018 12:52:29 -0500
Subject: [PATCH 27/30] fix(text-field): update
 deregisterValidationAttributeChangeHandler closure docs

---
 packages/mdc-textfield/adapter.js | 5 +++--
 packages/mdc-textfield/index.js   | 6 +-----
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/packages/mdc-textfield/adapter.js b/packages/mdc-textfield/adapter.js
index 5c7c40d0e31..9ce1245b079 100644
--- a/packages/mdc-textfield/adapter.js
+++ b/packages/mdc-textfield/adapter.js
@@ -113,9 +113,10 @@ class MDCTextFieldAdapter {
   registerValidationAttributeChangeHandler(handler) {}
 
   /**
-   * Disconnect all validation attribute listeners on the input element.
+   * Disconnects a validation attribute observer on the input element.
+   * @param {MutationObserver} observer
    */
-  deregisterValidationAttributeChangeHandler() {}
+  deregisterValidationAttributeChangeHandler(observer) {}
 
   /**
    * Returns an object representing the native text input element, with a
diff --git a/packages/mdc-textfield/index.js b/packages/mdc-textfield/index.js
index 11a246d947c..87a30f50b82 100644
--- a/packages/mdc-textfield/index.js
+++ b/packages/mdc-textfield/index.js
@@ -344,11 +344,7 @@ class MDCTextField extends MDCComponent {
           observer.observe(targetNode, config);
           return observer;
         },
-        deregisterValidationAttributeChangeHandler: (observer) => {
-          if (observer) {
-            observer.disconnect();
-          }
-        },
+        deregisterValidationAttributeChangeHandler: (observer) => observer.disconnect(),
         isFocused: () => {
           return document.activeElement === this.root_.querySelector(strings.INPUT_SELECTOR);
         },

From 98917b53e5d07b5da862f0581cc5ae4ea66f11c3 Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Wed, 28 Feb 2018 13:10:00 -0500
Subject: [PATCH 28/30] fix(text-field): updated closure annotations

---
 packages/mdc-textfield/adapter.js    | 1 +
 packages/mdc-textfield/foundation.js | 7 ++++---
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/mdc-textfield/adapter.js b/packages/mdc-textfield/adapter.js
index 9ce1245b079..077baa1d71e 100644
--- a/packages/mdc-textfield/adapter.js
+++ b/packages/mdc-textfield/adapter.js
@@ -108,6 +108,7 @@ class MDCTextFieldAdapter {
 
   /**
    * Registers a validation attribute change listener on the input element.
+   * @return {!MutationObserver}
    * @param {function(!Array): undefined} handler
    */
   registerValidationAttributeChangeHandler(handler) {}
diff --git a/packages/mdc-textfield/foundation.js b/packages/mdc-textfield/foundation.js
index 522c7592006..9b051996053 100644
--- a/packages/mdc-textfield/foundation.js
+++ b/packages/mdc-textfield/foundation.js
@@ -114,8 +114,8 @@ class MDCTextFieldFoundation extends MDCFoundation {
     this.textFieldInteractionHandler_ = () => this.handleTextFieldInteraction();
     /** @private {function(!Array): undefined} */
     this.validationAttributeChangeHandler_ = (mutations) => this.handleValidationAttributeMutation(mutations);
-    /** @private {MutationObserver} */
-    this.validationObserver_ = null;
+    /** @private {!MutationObserver} */
+    this.validationObserver_;
   }
 
   init() {
@@ -139,7 +139,8 @@ class MDCTextFieldFoundation extends MDCFoundation {
     ['click', 'keydown'].forEach((evtType) => {
       this.adapter_.registerTextFieldInteractionHandler(evtType, this.textFieldInteractionHandler_);
     });
-    this.validationObserver_ = this.adapter_.registerValidationAttributeChangeHandler(this.validationAttributeChangeHandler_);
+    this.validationObserver_ = this.adapter_.registerValidationAttributeChangeHandler(
+      this.validationAttributeChangeHandler_);
   }
 
   destroy() {

From 84f25c54edf89b0e1f54b2a3fb57d4a6f61d20bd Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Wed, 28 Feb 2018 14:11:51 -0500
Subject: [PATCH 29/30] fix(text-field): updated closure annotations

---
 demos/text-field.html                | 3 +--
 packages/mdc-textfield/adapter.js    | 2 +-
 packages/mdc-textfield/foundation.js | 1 +
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/demos/text-field.html b/demos/text-field.html
index bc11a7268d1..0966a90e55c 100644
--- a/demos/text-field.html
+++ b/demos/text-field.html
@@ -498,8 +498,7 @@ <h2>Full-Width Text Field and Textarea</h2>
         });
 
         document.getElementById('box-helper-text-as-validation').addEventListener('change', function(evt) {
-          var target = evt.target;
-          helperText.classList[target.checked ? 'add' : 'remove'](
+          helperText.classList[evt.target.checked ? 'add' : 'remove'](
             'mdc-text-field-helper-text--validation-msg'
           );
         });
diff --git a/packages/mdc-textfield/adapter.js b/packages/mdc-textfield/adapter.js
index 077baa1d71e..8769d3b405f 100644
--- a/packages/mdc-textfield/adapter.js
+++ b/packages/mdc-textfield/adapter.js
@@ -115,7 +115,7 @@ class MDCTextFieldAdapter {
 
   /**
    * Disconnects a validation attribute observer on the input element.
-   * @param {MutationObserver} observer
+   * @param {!MutationObserver} observer
    */
   deregisterValidationAttributeChangeHandler(observer) {}
 
diff --git a/packages/mdc-textfield/foundation.js b/packages/mdc-textfield/foundation.js
index 9b051996053..251464a5490 100644
--- a/packages/mdc-textfield/foundation.js
+++ b/packages/mdc-textfield/foundation.js
@@ -169,6 +169,7 @@ class MDCTextFieldFoundation extends MDCFoundation {
 
   /**
    * Handles validation attribute changes
+   * @param {Array<MutationRecord>} mutationsList
    */
   handleValidationAttributeMutation(mutationsList) {
     mutationsList.some((mutation) => {

From bc2b1eb8fc9761814530c73064686d8c5b0369f7 Mon Sep 17 00:00:00 2001
From: Matt Goo <mattgoo@google.com>
Date: Thu, 1 Mar 2018 15:55:40 -0500
Subject: [PATCH 30/30] fix(text-field): update foundation and adapter closure
 annotations

---
 packages/mdc-textfield/adapter.js          | 2 +-
 packages/mdc-textfield/foundation.js       | 5 +++--
 test/unit/mdc-textfield/foundation.test.js | 2 +-
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/mdc-textfield/adapter.js b/packages/mdc-textfield/adapter.js
index 939f0069b42..44dfd23547d 100644
--- a/packages/mdc-textfield/adapter.js
+++ b/packages/mdc-textfield/adapter.js
@@ -108,8 +108,8 @@ class MDCTextFieldAdapter {
 
   /**
    * Registers a validation attribute change listener on the input element.
-   * @return {!MutationObserver}
    * @param {function(!Array): undefined} handler
+   * @return {!MutationObserver}
    */
   registerValidationAttributeChangeHandler(handler) {}
 
diff --git a/packages/mdc-textfield/foundation.js b/packages/mdc-textfield/foundation.js
index 72d0e9d4371..0efc3a30e88 100644
--- a/packages/mdc-textfield/foundation.js
+++ b/packages/mdc-textfield/foundation.js
@@ -125,7 +125,7 @@ class MDCTextFieldFoundation extends MDCFoundation {
     /** @private {function(!Event): undefined} */
     this.textFieldInteractionHandler_ = () => this.handleTextFieldInteraction();
     /** @private {function(!Array): undefined} */
-    this.validationAttributeChangeHandler_ = (mutations) => this.handleValidationAttributeMutation(mutations);
+    this.validationAttributeChangeHandler_ = (mutations) => this.handleValidationAttributeMutation_(mutations);
     /** @private {!MutationObserver} */
     this.validationObserver_;
   }
@@ -181,8 +181,9 @@ class MDCTextFieldFoundation extends MDCFoundation {
   /**
    * Handles validation attribute changes
    * @param {Array<MutationRecord>} mutationsList
+   * @private
    */
-  handleValidationAttributeMutation(mutationsList) {
+  handleValidationAttributeMutation_(mutationsList) {
     mutationsList.some((mutation) => {
       if (VALIDATION_ATTR_WHITELIST.indexOf(mutation.attributeName) > -1) {
         this.styleValidity_(true);
diff --git a/test/unit/mdc-textfield/foundation.test.js b/test/unit/mdc-textfield/foundation.test.js
index d769eceb244..6604d9ebaf4 100644
--- a/test/unit/mdc-textfield/foundation.test.js
+++ b/test/unit/mdc-textfield/foundation.test.js
@@ -317,7 +317,7 @@ test('#init adds event listeners', () => {
 
 test('#destroy removes event listeners', () => {
   const {foundation, mockAdapter} = setupTest();
-  foundation.validationObserver_ = {test: 'test1'};
+  foundation.validationObserver_ = {};
   foundation.destroy();
 
   td.verify(mockAdapter.deregisterInputInteractionHandler('focus', td.matchers.isA(Function)));