title: Changing MDL Text Field text dynamically with JQuery
body: <p>I'm trying to change a MDL Text Field text using JQuery. However, there are some problems occurring, firstly the label is not animating UP and for basic Text Fields the placeholder text is not going away. Secondly, if a text field is marked as <code>required</code>, after setting it's value via JQuery the field remains red like nothing was placed in there. <a href="https://jsfiddle.net/xee35ea3/1/" rel="nofollow noreferrer">JSFiddle</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;dialog id="adicionar-editar-campista" class="mdl-dialog" style="text-align: center"&gt;
      &lt;div class="mdl-dialog__content"&gt;
          &lt;h4&gt;Ficha de Cadastro&lt;/h4&gt;
          &lt;p style="color: red"&gt;Campos em vermelho são obrigatórios.&lt;/p&gt;
  
          &lt;form action="#"&gt;
              &lt;div id="cadastro-numero-ficha" class="mdl-textfield mdl-js-textfield"&gt;
                  &lt;input id="numero-ficha" class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?"&gt;
                  &lt;label class="mdl-textfield__label" for="numero-ficha"&gt;N&amp;#186; Ficha&lt;/label&gt;
                  &lt;span class="mdl-textfield__error"&gt;Apenas numeros!&lt;/span&gt;
              &lt;/div&gt;  
  
              &lt;div id="cadastro-nome-ficha" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"&gt;
                  &lt;input id="nome-ficha" class="mdl-textfield__input" type="text" required&gt;
                  &lt;label class="mdl-textfield__label" for="nome-ficha"&gt;Nome Completo&lt;/label&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/dialog&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>//Do something
  $("#numero-ficha").val(value.number);
  $("#nome-ficha").val(value.username);
  //Do something
  </code></pre>