How to display wrong password error message from javascript MDL textfield

I am trying to write a login page but I am stuck at displaying the message in mdl-textfield__error when the password is wrong. My html code is as follows:

<div class="mdl-layout mdl-js-layout mdl-color--grey-100">
<main class="mdl-layout__content">
    <div class="mdl-grid">
        <div class="mdl-layout-spacer"></div>
        <div class="mdl-card mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-shadow--6dp">
            <div class="mdl-card__title mdl-color--primary mdl-color-text--white">
                <h2 class="mdl-card__title-text">Title</h2>
            </div>
            <div class="mdl-card__supporting-text">
                <form action="#">
                    <div class="mdl-textfield mdl-js-textfield">
                        <input class="mdl-textfield__input" type="email" id="username" />
                        <label class="mdl-textfield__label" for="username">Email</label>
                    </div>
                    <div class="mdl-textfield mdl-js-textfield">
                        <input class="mdl-textfield__input" type="password" id="userpass" />
                        <label class="mdl-textfield__label" for="userpass">Şifre</label>
                        <span class="mdl-textfield__error">Şifre yanlış. Tekrar deneyin.</span>
                    </div>
                </form>
            </div>
            <div class="mdl-card__actions mdl-card--border">
                <button id="sign-in" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">Giriş Yap</button>
            </div>
        </div>
        <div class="mdl-layout-spacer"></div>
    </div>
</main>

Solution

Add the is-invalid and is-dirty classes to the parent .mdl-textfield element.

<link href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" rel="stylesheet"/>
<div class="mdl-layout mdl-js-layout mdl-color--grey-100">
<main class="mdl-layout__content">
  <div class="mdl-grid">
    <div class="mdl-layout-spacer"></div>
    <div class="mdl-card mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-shadow--6dp">
      <div class="mdl-card__title mdl-color--primary mdl-color-text--white">
        <h2 class="mdl-card__title-text">OLUF 17 Giriş</h2>
      </div>
      <div class="mdl-card__supporting-text">
        <form action="#">
          <div class="mdl-textfield mdl-js-textfield">
            <input class="mdl-textfield__input" type="email" id="username" />
            <label class="mdl-textfield__label" for="username">Email</label>
          </div>
          <div class="mdl-textfield mdl-js-textfield is-dirty is-invalid">
            <input class="mdl-textfield__input" type="password" id="userpass" />
            <label class="mdl-textfield__label" for="userpass">Şifre</label>
            <span class="mdl-textfield__error">Şifre yanlış. Tekrar deneyin.</span>
          </div>
        </form>
      </div>
      <div class="mdl-card__actions mdl-card--border">
        <button id="sign-in" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">Giriş Yap</button>
      </div>
    </div>
    <div class="mdl-layout-spacer"></div>
  </div>
</main>