How can I programmatically mark text field as invalid?

问题

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:

来源：https://stackoverflow.com/questions/44528717/how-can-i-programmatically-mark-text-field-as-invalid