[mwc-textfield] validationMessage not set after calling reportValidaty()

[dflorey]

When calling reportValidity() on a mwc text field the validationMessage is empty.
The validationMessage is set on the native text input, but the message is not exposed be read from the text field.

[asyncLiz]

We should discuss the built-in validity and how we want to handle it. validationMessage is a native readonly property of inputs that is different than the Material "validation message" UX.

[dflorey]

It would be great if the mwc textfield would just work like native input fields and follow the validation API spec:
https://developer.mozilla.org/en-US/docs/Web/API/Constraint_validation

I also did not manage to set constraints and make the appropriate message show up on validation (even though it is set in the nested input field).

[asyncLiz]

I agree! Our goal is to align as close to native as possible, including the constraint validation api.

[dflorey]

Just some more findings:
When setting the "validationmessage" attribute/property on the mwc textfield it will then be reported instead of the native validation message.
In the spec the setCustomValidity(message) is used so that the validationMessage then either contains the custom message or the native message when calling checkValidity()/reportValidity() (which is a good thing IMO).

[christophe-g]

For what it is worth, this is my textfield/textarea override for fetching native validation message when the field is invalid.

/**
 * mixin overrideing how mdc-textfiel handle validation message
 * It gets native input validation message when 
 * no default validatationMessage is set.
 * 
 * Related issue: 
 * https://github.com/material-components/material-components-web-components/issues/971
 * 
 */

export const TextFielValidityMessagedOverride = (baseElement) => class extends baseElement {

  firstUpdated() {
    if (this.validationMessage) {
      this._initialValidationMessage = this.validationMessage;
    }
    super.firstUpdated();
  }

  reportValidity() {
    const isValid = super.reportValidity();
    // Note(cg): override validationMessage only if no initial message set.
    if (!this._initialValidationMessage && !isValid) {
      this.validationMessage = this.nativeValidationMessage;
    }
    return isValid;
  }

  get nativeValidationMessage() {
    return this.formElement.validationMessage;
  }
};

export default TextFielValidityMessagedOverride;

[rutwick-alic]

I am the reporter of the issue #2365. For anyone who is encountering the same problem with a form jerk due to the missing helper/error markup, here's a quick hack I wrote to get around the issue. All I am doing is explicitly adding the same div after the input.

myCustomValidator = (ev) => {
    const value = ev.target.value || null;
    if (value) {
        const re = // some regex here;
        // Get a reference to the helper mark up to add
        const helperMarkup = ev.target.shadowRoot.querySelector("#my-helper")

        if (!re.test(value)) {
            // Remove the helper div if it is already there, otherwise it will display multiple helpers
            if(helperMarkup) {
                helperMarkup.remove()
            };
            ev.target.setCustomValidity("Please enter a valid address");
            this.isFormValid = false;
        } else {
            // HACKY METHOD: Explicitly append the helper div to avoid the form from jerking due to missing html
            ev.target.setCustomValidity(""); 
            if(!helperMarkup) {
                ev.target.shadowRoot.querySelector("label").insertAdjacentHTML('afterend', '<div class="mdc-text-field-helper-line" id="my-helper"><div class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg"><!----> <!----></div></div>')
            }
            this.isFormValid = true;
            this.value = value;
        }
    }
}

[asyncLiz]

Fixed in M3