MDL-Textfeldtext dynamisch mit JQuery ändern

Question

Ich versuche, einen MDL-Textfeld-Text mit JQuery zu ändern. Es treten jedoch einige Probleme auf, zum einen animiert die Beschriftung nicht UP und für grundlegende Textfelder wird der Platzhaltertext nicht gelöscht. Zweitens, wenn ein Textfeld als required markiert ist, bleibt das Feld, nachdem es seinen Wert über JQuery gesetzt hat, rot, so als ob nichts darin enthalten wäre. JSFiddle

HTML:

<dialog id="adicionar-editar-campista" class="mdl-dialog" style="text-align: center"> 
    <div class="mdl-dialog__content"> 
     <h4>Ficha de Cadastro</h4> 
     <p style="color: red">Campos em vermelho são obrigatórios.</p> 

     <form action="#"> 
      <div id="cadastro-numero-ficha" class="mdl-textfield mdl-js-textfield"> 
       <input id="numero-ficha" class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?"> 
       <label class="mdl-textfield__label" for="numero-ficha">N&#186; Ficha</label> 
       <span class="mdl-textfield__error">Apenas numeros!</span> 
      </div> 

      <div id="cadastro-nome-ficha" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> 
       <input id="nome-ficha" class="mdl-textfield__input" type="text" required> 
       <label class="mdl-textfield__label" for="nome-ficha">Nome Completo</label> 
      </div> 
     </form> 
    </div> 
</dialog> 

Javascript:

//Do something 
$("#numero-ficha").val(value.number); 
$("#nome-ficha").val(value.username); 
//Do something 

Answer 1

Ich denke, das ist, was Sie für

$('#numero-ficha')[0].parentElement.MaterialTextfield.change("15"); 
$('#nome-ficha')[0].parentElement.MaterialTextfield.change("some text"); 

Fiddle here