fix(text-field): disable validation check in setRequired

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 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">
@@ -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>
@@ -169,6 +169,14 @@ <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</label>
+        </div>
+        <div>
+          <input id="outlined-pattern" type="checkbox">
+          <label for="outlined-pattern">Must be at least 8 characters</label>
+        </div>
       </section>
 
       <section class="example" id="text-field-box-example">
@@ -203,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">
@@ -285,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>
 
@@ -359,8 +375,17 @@ <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) {
@@ -382,6 +407,21 @@ <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) {
+          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;
+          }
+        });
       });
 
       demoReady(function() {
@@ -415,13 +455,18 @@ <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');
+          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)';
-          input.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) {
@@ -512,10 +557,26 @@ <h2>Full-Width Text Field and Textarea</h2>
         });
 
         document.getElementById('required-leading-trailing').addEventListener('change', function(evt) {
-          [].slice.call(tfInputs).forEach(function(input) {
-                input.required = evt.target.checked;
-                input.pattern = evt.target.checked ? '.{8,}' : '.*';
-              });
+          var checked = evt.target.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;
+          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) {
@@ -557,8 +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) {
-          var target = evt.target;
-          tfRoot.querySelector('.mdc-text-field__input').required = target.checked;
+          toggleRequired(tf, evt.target.checked);
         });
         document.getElementById('alternate-colors').addEventListener('change', function (evt) {
           var target = evt.target;
@@ -606,13 +666,8 @@ <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 target = evt.target;
-          [].slice.call(tfRoot.querySelectorAll('.mdc-text-field__input'))
-              .forEach(function(input) {
-                input.required = target.checked;
-              })
+          toggleRequired(tf, evt.target.checked);
         });
       });
 
@@ -636,13 +691,10 @@ <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 target = evt.target;
-          [].slice.call(section.querySelectorAll('.mdc-text-field__input'))
-              .forEach(function(input) {
-                input.required = target.checked;
-              })
+          var checked = evt.target.checked;
+          toggleRequired(tf, evt.target.checked);
+          toggleRequired(tfMulti, evt.target.checked);
         });
 
         document.getElementById('fullwidth-alternate-colors').addEventListener('change', function (evt) {

packages/mdc-textfield/foundation.js

@@ -290,20 +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 {string} val is the value of attribute to be set
    */
-  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());
+  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);
   }
 
   /**

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 {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);
   }
 
   /**

test/unit/mdc-textfield/foundation.test.js

@@ -202,29 +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, helperText} =
+  const {foundation, mockAdapter, helperText} =
     setupValueTest('', /* isValid */ false);
 
-  foundation.setRequired(true);
-  assert.isOk(foundation.isRequired());
-  td.verify(mockAdapter.addClass(cssClasses.INVALID));
-  td.verify(helperText.setValidity(false));
+  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});
+});
+
+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 setRequired.
+  // 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};

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'));
 });