comparar dos inputs en Jquery

publicado por: Anonymous

Hola vengo trabajando en el cambio de contraseña.
Necesito implemetar que el campo repita contraseña sea igual al campo Contraseña.

Pero si el usuario cambia el campo Contraseña le salga que las contraseñas no conciden, y de forma inversa si cambia el campo repita contraseña le salga el aviso, sin embargo si ambos coinciden que le salga el aviso “Las constraseñas si coinciden”

Hasta el momento esto es mi avance

_x000D_

_x000D_

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

_x000D_

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

_x000D_

_x000D_

_x000D_

solución

Te falta cambiar el texto del mensaje cuando hay un error y agregar la misma función al otro campo de contraseña

Agregas listeners:

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

Y la función cambioDePass:

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

Quedaría algo así:

_x000D_

_x000D_

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

_x000D_

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

_x000D_

_x000D_

_x000D_

Fiddle: jsfiddle

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *