Keyup function in input when loading a modal

Asked

Viewed 301 times

2

I am implementing a function to change the password of the logged in user. When I load the user 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 the password to be validated by loading the modal. Currently my function only validates when I delete the component data and re-focus.

Could someone help me ??

That’s my job 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 is 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>
javascript jquery keyup

  • Include more content from your html and js, you are somewhat confused to understand the current behavior and what you want

  • Eduardo segue jsfiddle: http://jsfiddle.net/1aeur58f/1013/.

  • 1

    @Matheusmiranda It worked perfectly!! puts as answer. Thank you !

  • I made another code, look at my answer as it turned out. , it validates the password when loading modal.

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
});

Following example in jsfiddle:

http://jsfiddle.net/1aeur58f/1014/

Or you can do it:

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

  • can add the Document to your code $(Document). on('#modalAlterarUsuario','Shown.bs.modal', Function(e) { // your code js });

0

Hi @Duardo-krakhecke!

I believe you can achieve better results by separating the validation function and calling it both in the keyup event and in the modal show event. If you are using a framework (like 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 HTML that you cited something similar to a password field...). Finally, I believe that its validation function can receive the element as parameter instead of being isolated in a specific element, so it is modular.

See if this can be useful: https://jsfiddle.net/GustavoAdolfo/xakhc5av/

How would you like to take this test and tell us the results? Success!

Browser other questions tagged javascript jquery keyup

You are not signed in. Login or sign up in order to post.