2

I am trying to integrate material-components-web.

The very first use-case of text-box with validation message did not work. The text-box works but the validation message does not. How to get the validation message working?

 <script>
    mdc.textField.MDCTextField.attachTo(document.querySelector('#passbox'));
    
    mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field-helper-text--validation-msg'));
    </script>

<label id="passbox" class="mdc-text-field mdc-text-field--filled">
        <span class="mdc-text-field__ripple"></span>
        <input class="mdc-text-field__input" type="password" aria-labelledby="my-label-id" required minlength="8">
        <span class="mdc-floating-label" id="my-label-id">Password</span>
        <span class="mdc-line-ripple"></span>

        <span class="mdc-text-field-helper-line">
            <span id="email-helper-text" class="mdc-text-field-helper-text--validation-msg" aria-hidden="true">
                Minimum password lenght is 8 characters.
            </span>
        </span>
    </label>
Edric
  • 24,639
  • 13
  • 81
  • 91
realPro
  • 1,713
  • 3
  • 22
  • 34

0 Answers0