材料設計ライトエラーを使用してパスワード確認を確認

Question

私は現在Googleの材料設計書を使用してウェブページを作成していますが、パスワードが一致しないときにパスワード確認テキストボックスを無効に変更する必要のある変更については、したがって、パスワードが一致しない場合は、スタイルmdl-textfield__errorスタイルでエラーを生成します。

MDLを使用してこれをどのように達成できますか？

<tr> 
    <td> 
     <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> 
      <form:input path="password" type="password" class="mdl-textfield__input" id="password" required="true" pattern="" /> 
      <label class="mdl-textfield__label" for="email">Password</label> 
      <span class="mdl-textfield__error"> Input must not be empty</span> 
     </div> 
    </td> 
</tr> 
<tr> 
    <td> 
     <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> 
      <input path="password" type="password" class="mdl-textfield__input" id="password" required pattern="" /> 
      <label class="mdl-textfield__label" for="email">Confirm Password</label> 
      <span class="mdl-textfield__error"> Input must be equal to password</span> 
     </div> 
    </td> 
</tr> 

Answer 1

あなたの質問が動的にスタイルを適用する方法についてはされている場合、2つのパスワードフィールドを与える異なるIDをパスワード1とpassoword2を言うとスタイリングを与えるためにjqueryの中で、次のコードを使用します。

$("#password2").parent().addClass('is-invalid'); 

また無効なスタイリングを削除するには、代わりにremoveClass関数を使用する必要があります。

私はこのURLでb2550のコメントから考えましたhttps://github.com/google/material-design-lite/issues/1502