compare two inputs in Jquery

Question

compare two inputs in Jquery

Navigation

#1 by (3 votes)

2

Hello, I have been working on the password change. I need to implement that the field repita contraseña is equal to the field Contraseña .

But if the user changes the field Contraseña it will appear that the passwords do not match, and conversely if the field changes repita contraseña the warning will appear , however, if both agree that the warning will appear " The passwords if they match"

So far this is my breakthrough

$(document).ready(function () {
    $('#mensaje_error').hide();  
});

$("#contra_n_usuario").keyup(function () {
    var cont = $('#contra_usuario').val();
    var cont2 = $('#contra_n_usuario').val();
    if (cont == cont2) {
        $('#mensaje_error').hide();
        $('#mensaje_error').attr("class", "control-label col-md-12 text-success");
        $('#mensaje_error').show();
        $('#mensaje_error').html("Las constraseñas si coinciden");
    } else {
        $('#mensaje_error').show();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" id="form_configuracion" class="form-horizontal">
<div class="box-body">
 <div class="row">
  <div class="col-md-12" align="center">
   <div class="row">
    <div class="col-md-6">
     <div class="form-group">
     <label class="control-label col-md-6">Usuario</label>
      <div class="col-md-6">
      <input id="nombre_usuario" placeholder="Ingrese codigo" required="" class="form-control" value="MOREDROID" type="text"><span class="help-block"></span>
      </div>
      </div>
     </div>
    </div>
  <div class="row">
   <div class="col-md-6">
    <div class="form-group">
    <label class="control-label col-md-6">Rol</label>
     <div class="col-md-6">
     <input id="rol_usuario" readonly="" class="form-control"  value="ADMINISTRADOR" type="text"><span class="help-block"></span>
     </div>
    </div>
   </div>
  </div>
  <div class="row">
   <div class="col-md-6">
    <div class="form-group">
    <label class="control-label col-md-6">Contraseña</label>
     <div class="col-md-6">
     <input id="contra_usuario" placeholder="Ingrese Nueva Contraseña" required="" class="form-control" type="password"> <span class="help-block"></span>
     </div>
    </div>
   </div>
  </div> 
  <div class="row">
   <div class="col-md-6">
    <div class="form-group">
     <label class="control-label col-md-6">Repita Contraseña</label>
      <div class="col-md-6">
       <input id="contra_n_usuario" placeholder="Repita Contraseña" required="" class="form-control" type="password"> <span class="help-block"></span>
        <label id="mensaje_error" class="control-label col-md-12 text-danger" style="display: block;">Las constraseñas no coinciden</label>
      </div>                                                        
     </div>
    </div>
   </div>    
  </div>
 </div>
</div>
</form>

jquery html

asked by Ivan More Flores 05.07.2017 в 15:40

source

1 answer

Redirect from java script, inside a Json Succces Problem with current time in PHP and MySQL

score 3 · Accepted Answer

You need to change the message text when there is an error and add the same function to the other password field

You add listeners:

    $("#contra_usuario").on('keyup', cambioDePass);
    $("#contra_n_usuario").on('keyup', cambioDePass);

And the changeDePass function:

var cambioDePass = function() {
        var cont = $('#contra_usuario').val();
    var cont2 = $('#contra_n_usuario').val();
    if (cont == cont2) {
        $('#mensaje_error').hide();
        $('#mensaje_error').attr("class", "control-label col-md-12 text-success");
        $('#mensaje_error').show();
        $('#mensaje_error').html("Las constraseñas si coinciden");
    } else {
         $('#mensaje_error').html("Las constraseñas no coinciden");
        $('#mensaje_error').show();
    }
}

It would be something like this:

$(document).ready(function () {
    $('#mensaje_error').hide();  
});

var cambioDePass = function() {
		var cont = $('#contra_usuario').val();
    var cont2 = $('#contra_n_usuario').val();
    if (cont == cont2) {
        $('#mensaje_error').hide();
        $('#mensaje_error').attr("class", "control-label col-md-12 text-success");
        $('#mensaje_error').show();
        $('#mensaje_error').html("Las constraseñas si coinciden");
    } else {
         $('#mensaje_error').html("Las constraseñas no coinciden");
        $('#mensaje_error').show();
    }
}

$("#contra_usuario").on('keyup', cambioDePass);
$("#contra_n_usuario").on('keyup', cambioDePass);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" id="form_configuracion" class="form-horizontal">
<div class="box-body">
 <div class="row">
  <div class="col-md-12" align="center">
   <div class="row">
    <div class="col-md-6">
     <div class="form-group">
     <label class="control-label col-md-6">Usuario</label>
      <div class="col-md-6">
      <input id="nombre_usuario" placeholder="Ingrese codigo" required="" class="form-control" value="MOREDROID" type="text"><span class="help-block"></span>
      </div>
      </div>
     </div>
    </div>
  <div class="row">
   <div class="col-md-6">
    <div class="form-group">
    <label class="control-label col-md-6">Rol</label>
     <div class="col-md-6">
     <input id="rol_usuario" readonly="" class="form-control"  value="ADMINISTRADOR" type="text"><span class="help-block"></span>
     </div>
    </div>
   </div>
  </div>
  <div class="row">
   <div class="col-md-6">
    <div class="form-group">
    <label class="control-label col-md-6">Contraseña</label>
     <div class="col-md-6">
     <input id="contra_usuario" placeholder="Ingrese Nueva Contraseña" required="" class="form-control" type="password"> <span class="help-block"></span>
     </div>
    </div>
   </div>
  </div> 
  <div class="row">
   <div class="col-md-6">
    <div class="form-group">
     <label class="control-label col-md-6">Repita Contraseña</label>
      <div class="col-md-6">
       <input id="contra_n_usuario" placeholder="Repita Contraseña" required="" class="form-control" type="password"> <span class="help-block"></span>
        <label id="mensaje_error" class="control-label col-md-12 text-success" style="display: block;">Las constraseñas si coinciden</label>
      </div>                                                        
     </div>
    </div>
   </div>    
  </div>
 </div>
</div>
</form>

Fiddle: jsfiddle