如何从 javascript MDL 文本字段显示错误的密码错误消息答案

【问题标题】：How to display wrong password error message from javascript MDL textfield如何从 javascript MDL 文本字段显示错误的密码错误消息
【发布时间】：2017-01-12 18:14:46
【问题描述】：

我正在尝试编写登录页面，但当密码错误时，我无法在mdl-textfield__error 中显示消息。我的html代码如下：

<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>

【问题讨论】：

您是问如何检查密码是否错误？或者如何显示错误信息？你在检查密码是否错误，你有ajax请求吗？
@BrettDeWoody 我在问如何显示错误消息。我正在用 JS 代码中的 firebase 检查密码的正确性。
以下解决方案是否解决了问题？
是的，非常感谢。

标签： javascript html material-design-lite

【解决方案1】：

将is-invalid 和is-dirty 类添加到父.mdl-textfield 元素。

<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>

【讨论】：