Keyup function in input when loading a modal

Navigation
2

I'm implementing a function to change the password of the logged-in user. When I load the user's password into the input component it does not validate the loaded password, which is outside the rule established by the function below. I would like that, when loading the modal, the password has already been validated. Currently my function only validates when I delete the data of the component and I give back the focus.

Can anyone help me ??

This is my role in JS : 

$('#inpSenha').keyup(function() {
  var value = $(this).val();
  var letras,
    numeros,
    letrasMaiusculas,
    especial;

  if (/[a-z]/gm.test(value)) {
    letras = " ";
  } else {
    letras = "Letras minúsculas";
  }
  if (/[0-9]/gm.test(value)) {
    numeros = "  ";
  } else {
    numeros = "Números";
  }
  if (/[A-Z]/gm.test(value)) {
    letrasMaiusculas = "  ";
  } else {
    letrasMaiusculas = "letras maiúsculas";
  }
  if (/[!@#$%*()_+^&{}}:;?.]/gm.test(value)) {
    especial = "  ";
  } else {
    especial = "Caracteres especiais não alfaNuméricos";
  }

  $('p').html("A senha deve possuir: " + letras + "|" + numeros + "|" + letrasMaiusculas + "|" + especial)
});

My component looks like this: 

<div class="modal fade" data-backdrop="static" data-keyboard="false" id="modalAlterarUsuario" role="dialog">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div style="color: white; background-color: #0c4677" class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h3 class="modal-title">
           <strong>Preferências</strong>
        </h3>
      </div>
      <div class="modal-body">
        <form novalidate="novalidate" data-toggle="validator" name="frmUsuario" id="formCadastro" role="form">
          <div class="row">

            <div>
              <div class="form-group col-md-3">
                <div class="form-group" style="height: 200px;">
                  <input class="hide" type='file' id="inputFile" onchange="readURL(this);" />
                  <img title="Clique para alterar a imagem" id="imagemUsuario" class="img-responsive img-circle" src="{{usuario.fotoUsuario}}" style="width: 180px;" ng-model="usuario.fotoUsuario" onerror="this.src='./imagem/imgNaoDisponivel.jpg'" />
                </div>
              </div>
            </div>    
            <div class="form-group col-md-4">
              <label>Login:</label>
              <input maxlength="20" disabled="disabled" type="text" class="form-control" ng-model="usuario.login" />
            </div>
            <div class="form-group col-md-4">
              <label>Nome:</label>
              <input maxlength="30" type="text" class="form-control" ng-model="usuario.nome" />
            </div>
            <div class="form-group col-md-4">
              <label>E-mail:</label>
              <input maxlength="100" type="email" class="form-control" ng-model="usuario.email" />
            </div>
            <div class="form-group col-md-4">
              <label>Senha:</label>
              <input id="inpSenha" required="required" type="password" class="form-control" ng-model="usuario.senha" autofocus="autofocus" />
              <span id="numero">A senha deve conter pelo menos um número.</span>
              <br></br>
              <span id="maiuscula">A senha deve conter pelo menos uma letra maiúscula.</span>
              <br></br>
              <span id="minuscula">A senha deve conter pelo menos uma letra minúscula.</span>
              <br></br>
              <span id="seis">A senha deve conter no mínimo 6 caracteres.</span>
              <br></br>
              <span id="especial">A senha deve conter pelo menos um caractere especial não alfanumérico. </span>
              <br></br>
            </div>    
          </div> 
        </form>
      </div>    
      <div class="modal-footer">
        <button style="background-color: #b51e27;  color: white;" type="button" class="btn btn-default " id="btnSalvar" data-dismiss="modal" ng-click="salvarUsuario()">Salvar</button>
        <button style="background-color: #b51e27; color: white;" type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
      </div>
    </div>
  </div>
</div>
    
asked by anonymous 28.12.2017 / 13:52

2 answers

2

This event is triggered when the modal has been made visible to the user: 

$('#modalAlterarUsuario').on('shown.bs.modal', function (e) {
  // seu código js
});

Follow the example in jsfiddle:

link

Or you can do this: 

$(document).on('#modalAlterarUsuario','shown.bs.modal', function (e) { 
   // seu código js 
});
    
28.12.2017 / 15:37
0

Hello @ eduardo-krakhecke!

I believe you can achieve a better result by separating the validation function and calling it in both the keyup event and the modal show event. If you are using a framework (such as Bootstrap) to create your modal, you can call the validation function in the appropriate event (show) and adapt it to be assigned to the value of your password field (I did not find in the HTML that you quoted something like a password field ...). Anyway, I believe that your validation function can receive the element as a parameter instead of being isolated in a specific element, so it becomes modular.

See if this can be useful: link

What do you think of doing this test and telling us the result? Success!

    
28.12.2017 / 16:16
Google API - Autocomplete does not have zip code What are the "User" and "CancellationToken" parameters used for?