feat(textfield): Add valid setter, so clients can set custom validity

Resolves #1018

Author: Teoxoy

packages/mdc-textfield/README.md

@@ -153,9 +153,9 @@ by HTML5's form validation API.
 </div>
 ```
 
-An input's validity is checked via `checkValidity()` on blur, and the styles are updated
-accordingly. When using the `required` attribute, an asterisk will be automatically appended to the
-label text, as per the spec.
+By default an input's validity is checked via `checkValidity()` on blur, and the styles are updated
+accordingly. Set the MDCTextfield.valid variable to set the input's validity explicitly. MDC Textfield
+automatically appends an asterisk to the label text if the required attribute is set.
 
 Help text can be used to provide additional validation messages. Use
 `mdc-textfield-helptext--validation-msg` to provide styles for using the help text as a validation
@@ -324,6 +324,10 @@ with the corresponding id within the document and automatically assign it to thi
 Boolean. Proxies to the foundation's `isDisabled/setDisabled` methods when retrieved/set
 respectively.
 
+##### MDCTextfield.valid
+
+Boolean setter. Proxies to the foundation's `setValid` method when set.
+
 ##### MDCTextfield.ripple
 
 `MDCRipple` instance. Set to the `MDCRipple` instance for the root element that `MDCTextfield`

packages/mdc-textfield/foundation.js

@@ -57,6 +57,7 @@ export default class MDCTextfieldFoundation extends MDCFoundation {
     this.inputBlurHandler_ = () => this.deactivateFocus_();
     this.inputInputHandler_ = () => this.autoCompleteFocus_();
     this.inputKeydownHandler_ = () => this.receivedUserInput_ = true;
+    this.useCustomValidityChecking_ = false;
   }
 
   init() {
@@ -99,24 +100,30 @@ export default class MDCTextfieldFoundation extends MDCFoundation {
   }
 
   deactivateFocus_() {
-    const {FOCUSED, INVALID, LABEL_FLOAT_ABOVE} = MDCTextfieldFoundation.cssClasses;
+    const {FOCUSED, LABEL_FLOAT_ABOVE} = MDCTextfieldFoundation.cssClasses;
     const input = this.getNativeInput_();
-    const isValid = input.checkValidity();
 
     this.adapter_.removeClass(FOCUSED);
     if (!input.value && !this.isBadInput_()) {
       this.adapter_.removeClassFromLabel(LABEL_FLOAT_ABOVE);
       this.receivedUserInput_ = false;
     }
+    if (!this.useCustomValidityChecking_) {
+      this.changeValidity_(input.checkValidity());
+    }
+  }
+
+  changeValidity_(isValid) {
+    const {INVALID} = MDCTextfieldFoundation.cssClasses;
     if (isValid) {
       this.adapter_.removeClass(INVALID);
     } else {
       this.adapter_.addClass(INVALID);
     }
-    this.updateHelptextOnDeactivation_(isValid);
+    this.updateHelptext_(isValid);
   }
 
-  updateHelptextOnDeactivation_(isValid) {
+  updateHelptext_(isValid) {
     const {HELPTEXT_PERSISTENT, HELPTEXT_VALIDATION_MSG} = MDCTextfieldFoundation.cssClasses;
     const {ROLE} = MDCTextfieldFoundation.strings;
     const helptextIsPersistent = this.adapter_.helptextHasClass(HELPTEXT_PERSISTENT);
@@ -167,4 +174,9 @@ export default class MDCTextfieldFoundation extends MDCFoundation {
       badInput: false,
     };
   }
+
+  setValid(isValid) {
+    this.useCustomValidityChecking_ = true;
+    this.changeValidity_(isValid);
+  }
 }

packages/mdc-textfield/index.js

@@ -59,6 +59,10 @@ export class MDCTextfield extends MDCComponent {
     this.foundation_.setDisabled(disabled);
   }
 
+  set valid(valid) {
+    this.foundation_.setValid(valid);
+  }
+
   getDefaultFoundation() {
     return new MDCTextfieldFoundation(Object.assign({
       addClass: (className) => this.root_.classList.add(className),

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

@@ -92,6 +92,18 @@ test('#setDisabled removes mdc-textfield--disabled when set to false', () => {
   td.verify(mockAdapter.removeClass(cssClasses.DISABLED));
 });
 
+test('#setValid adds mdc-textfied--invalid when set to false', () => {
+  const {foundation, mockAdapter} = setupTest();
+  foundation.setValid(false);
+  td.verify(mockAdapter.addClass(cssClasses.INVALID));
+});
+
+test('#setValid removes mdc-textfied--invalid when set to true', () => {
+  const {foundation, mockAdapter} = setupTest();
+  foundation.setValid(true);
+  td.verify(mockAdapter.removeClass(cssClasses.INVALID));
+});
+
 test('#init adds mdc-textfield--upgraded class', () => {
   const {foundation, mockAdapter} = setupTest();
   foundation.init();
@@ -246,19 +258,38 @@ test('on blur does not remove mdc-textfield__label--float-above if input has a v
   td.verify(mockAdapter.removeClassFromLabel(cssClasses.LABEL_FLOAT_ABOVE), {times: 0});
 });
 
-test('on blur removes mdc-textfield--invalid if input.checkValidity() returns true', () => {
+test('on blur removes mdc-textfield--invalid if custom validity is false and' +
+     'input.checkValidity() returns true', () => {
   const {mockAdapter, blur} = setupBlurTest();
   blur();
   td.verify(mockAdapter.removeClass(cssClasses.INVALID));
 });
 
-test('on blur adds mdc-textfied--invalid if input.checkValidity() returns false', () => {
+test('on blur adds mdc-textfied--invalid if custom validity is false and' +
+     'input.checkValidity() returns false', () => {
   const {mockAdapter, blur, nativeInput} = setupBlurTest();
   nativeInput.checkValidity = () => false;
   blur();
   td.verify(mockAdapter.addClass(cssClasses.INVALID));
 });
 
+test('on blur does not remove mdc-textfield--invalid if custom validity is true and' +
+     'input.checkValidity() returns true', () => {
+  const {foundation, mockAdapter, blur} = setupBlurTest();
+  foundation.setValid(false);
+  blur();
+  td.verify(mockAdapter.removeClass(cssClasses.INVALID), {times: 0});
+});
+
+test('on blur does not add mdc-textfied--invalid if custom validity is true and' +
+     'input.checkValidity() returns false', () => {
+  const {foundation, mockAdapter, blur, nativeInput} = setupBlurTest();
+  nativeInput.checkValidity = () => false;
+  foundation.setValid(true);
+  blur();
+  td.verify(mockAdapter.addClass(cssClasses.INVALID), {times: 0});
+});
+
 test('on blur adds role="alert" to helptext if input is invalid and helptext is being used ' +
      'as a validation message', () => {
   const {mockAdapter, blur, nativeInput} = setupBlurTest();

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

@@ -119,6 +119,14 @@ test('get/set disabled updates the component styles', () => {
   assert.isNotOk(root.classList.contains(cssClasses.DISABLED));
 });
 
+test('set valid updates the component styles', () => {
+  const {root, component} = setupTest();
+  component.valid = false;
+  assert.isOk(root.classList.contains(cssClasses.INVALID));
+  component.valid = true;
+  assert.isNotOk(root.classList.contains(cssClasses.INVALID));
+});
+
 test('#adapter.addClass adds a class to the root element', () => {
   const {root, component} = setupTest();
   component.getDefaultFoundation().adapter_.addClass('foo');