使用Material Design Lite错误确认密码验证

Question

I am currently creating a web page using Google's material design lite and I hit a stumbling block on the necessary changes needed to change the confirm password textbox to invalid when the passwords to not match. Thus generating an error with the style mdl-textfield__error style if the passwords do not match.

How could I achieve this using 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

If your question is regarding how to apply the style dynamically,give the two password fields different ids say password1 and passoword2 and use the following code in jquery to give the styling.

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

Also removing the invalid styling would involve the use of the removeClass function instead.

I got the idea from comment of b2550 at this url https://github.com/google/material-design-lite/issues/1502