如何以编程方式将文本字段标记为无效？

Question

如何在Material Design Light中以编程方式将文本字段标记为无效？

我的HTML代码：

  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input id="email" type="email" class="mdl-textfield__input">
    <label for="email" class="mdl-textfield__label">Email</label>
    <span class="mdl-textfield__error">Email is invalid or already taken!!!</span>
  </div>

我在JavaScript中添加了 is-invalid 类，但显示效果不佳：