How can I programmatically mark text field as inva

问题:

How can I programmatically mark text field as invalid in Material Design Light?

My HTML code:

  <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>

I added is-invalid class in JavaScript but it displays badly: