Bestätigen Sie die Passwort-Validierung mit Material Design Lite Fehlern

Question

Ich erstelle derzeit eine Webseite mit Google Material Design Lite und ich traf einen Stolperstein auf die notwendigen Änderungen erforderlich, um die Bestätigung Kennwort Textfeld ungültig zu ändern, wenn die Passwörter nicht übereinstimmen. So erzeugt einen Fehler mit dem Stil mdl-textfield__error Stil, wenn die Passwörter nicht übereinstimmen.

Wie kann ich dies mit MDL erreichen?

<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

Wenn Ihre Frage ist in Bezug auf, wie die Art dynamisch anzuwenden, geben die beiden Passwortfelder verschiedene IDs sagen password1 und passoword2 und verwenden Sie den folgenden Code in jquery das Styling zu geben.

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

Das Entfernen des ungültigen Stylings würde stattdessen die Verwendung der removeClass-Funktion umfassen.

Ich habe die Idee von Kommentar von b2550 in dieser URL https://github.com/google/material-design-lite/issues/1502