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

如果您的问题是关于如何动态应用样式，请为两个密码字段指定不同的ID，如password1和passoword2，并在jquery中使用以下代码来设置样式。

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

同样删除无效样式将涉及使用removeClass函数。

我从这个网址https://github.com/google/material-design-lite/issues/1502

的b2550评论中得到了这个想法

使用材料设计精简错误确认密码验证

1 个答案: