Print just one HTML element with the keyup event in a form

Question

Print just one HTML element with the keyup event in a form

Navigation

#1 by (1 votes)

0

I am creating a form in which I will evaluate if the passwords match correctly. I am using the keyup event and it works 'half' because every time the passwords do not match, the element is added back to the DOM.

$('#buttonContinueSettings').attr("disabled", true);
  
  $('.form-settings').on('keyup', '.vnpass', function(){

    var newContrasena = $(".npass").val();
    var verifyNewContrasena = $('.vnpass').val();

    if (newContrasena == verifyNewContrasena) {
      $('.vnpass').parent().removeClass('has-error').addClass('has-success');
      $('.form-settings').find('span').removeClass('glyphicon-remove').addClass('glyphicon-ok');
      $('#buttonContinueSettings').attr("disabled", false);
    } else {
      $('.vnpass').parent().addClass('has-error has-feedback');
      $('.vnpass').after('
        <span class="glyphicon glyphicon-remove 
        form-control-feedback" aria-hidden="true"></span>
        '
      );
      $('.vnpass').tooltip({
        'trigger':'hover',
        'title':'Las contraseñas nuevan tienen que ser las mismas.',
        'placement':'bottom'
      });
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>
        <form class="form-settings" action="" method="POST">
          <div class="modal-header">
            <h4 class="modal-title">
            Cambiar contraseña
            </h4>
          </div>
          <div class="modal-body">
            <div class="row">
              <div class="col-md-12">
                  <div class="col-md-10 col-md-offset-1">
                    <div class="form-group">
                      <label class="sr-only" for="exampleInputPassword1">Contraseña nueva</label>
                      <input type="password" class="form-control npass" name="" placeholder="Contraseña nueva" required>
                    </div>
                  </div>
                  <div class="col-md-10 col-md-offset-1">
                    <div class="form-group">
                      <label class="sr-only" for="exampleInputPassword1">Verificar contraseña nueva</label>
                      <input type="password" class="form-control vnpass" name="" placeholder="Verificar contraseña nueva" required>
                    </div>
                  </div>
              </div>

              <button type="submit" id="buttonContinueSettings" class="btn btn-info">Continuar</button>
              <button type="button" class="btn btn-danger">Cancelar</button>
            </div>
          </div>
        </form>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>

</html>

The only thing I want is for the element to be printed only once, is there an event that can do what I ask?

javascript jquery bootstrap

asked by Hoose 29.06.2017 в 18:11

source

1 answer

Php with MVC does not work in Ubuntu, how to make it work? Create a json object for data table

score 1 · Accepted Answer

The verification in java script is with 3 equal === that you must correct

After verifying that the passwords do not match you should check if you have already added the class 'has-error has-feedback' with the .hasClass() method if you have the error class then you return and do not add the class

Now when you verify that the passwords are the same you remove the class .removeClass()