Modification dynamique du texte du champ de texte MDL avec JQuery

Question

J'essaie de modifier un texte de champ de texte MDL à l'aide de JQuery. Cependant, il y a quelques problèmes qui se produisent, d'abord l'étiquette n'anime pas UP et pour les champs de texte de base le texte de l'espace réservé ne va pas disparaître. Deuxièmement, si un champ de texte est marqué required, après avoir défini sa valeur via JQuery, le champ reste rouge comme si rien n'y était placé. 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

Je pense que c'est ce que vous cherchez

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

Fiddle here