使用材料設計lite錯誤確認密碼驗證

Question

我目前正在使用Google的材料設計lite創建一個網頁，並且當密碼不匹配時，我需要將確認密碼文本框更改爲無效所需的必要更改。因此如果密碼不匹配，則會產生樣式爲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

如果你的問題是關於如何動態地應用樣式，給兩個密碼字段不同的ID說密碼1和passoword2和使用下面的代碼jQuery中給予的造型。

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

此外，刪除無效樣式將涉及使用removeClass函數。

我從b2550的評論中得到了這個想法的想法https://github.com/google/material-design-lite/issues/1502