0

Tengo un formulario donde se registra el usuario pero quiero que antes de pasar a la página donde se va a insertar compare los input de Contraseña y Confirmar contraseña lo he intentado con varios ejemplos que he visto pero no me funcionan.

No me realiza la comparación:

<?php
header("Content-Type: text/html; charset=utf-8");

    $ruta='../../../';
    if(!isset($_SESSION['sadmin'])) header('refresh:0; url=../index.php');
    include("../../../dist/php/plantilla.php");
    $dis = new plantilla();
    $user = $_SESSION['usuario'];
?>

    <!DOCTYPE html>
    <html lang='es'>
        <head>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
            <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
            <?php echo stylepn($ruta,'AgroSys'); ?>
        </head>
        <body>
            <div id='wrapper'>
                <?php $dis->encabezado($ruta,$user);
                include('../../../dist/conexion/conexion2.php');
                $qry="SELECT id_rancho,nombre FROM rancho";
                $resultado=$conexion->query($qry);
                ?>
                <div class='row' style="padding:30px;">
                    <div id="contorno">
                        <div id="titulo"><center><font color="#FFF" size="5">Registrar Nuevo Usuario</font></center></div>
                        <div id="espacio"></div>
                    <form id="formCheckPassword" name="alta" action="agrega_proceso.php" enctype="multipart/form-data" runat="server" method="post">
                <table width='100%' border='0'>
                    <tr>
                        <td align='right'>
                            <label>Usuario:</label>
                        </td>
                        <td>
                            <div class='col-xs-7'>
                                <input type='text' name='txtUser' class='form-control' style='color: #000000;' required>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td align='right'>
                            <label>Nombre:</label>
                        </td>
                        <td>
                            <div class='col-xs-7'>
                                <input type='text' name='txtNombre' class='form-control' style='color: #000000;' required>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td align='right'>
                            <label>Apellido:</label>
                        </td>
                        <td>
                            <div class='col-xs-7'>
                                <input type='text' name='txtApellido' class='form-control' style='color: #000000;' required>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td align='right'>
                            <label>Rancho:</label>
                        </td>
                        <td>
                            <div class='col-xs-7'>
                                <select name='cboRancho' class='form-control' style='color: #000000;' required>
                                <option value=''>Seleccione una opci&oacute;n</option>
                                <?php
                                    while($fila=mysqli_fetch_assoc($resultado)) {
                                        echo "<option value='".$fila['id_rancho']."'>".$fila['nombre']."</option>";
                                    }
                                 ?>
                        </select></div>
                        </td>
                    </tr>
                    <tr>
                        <td align='right'>
                            <label>Tipo de Usuario:</label>
                        </td>
                        <td>
                            <div class='col-xs-7'>
                                <select name='cboTipoUser' class='form-control' style='color: #000000;' required>
                                    <option value=''>Seleccione una opci&oacute;n</option>
                                    <option value='usr'>Est&aacute;ndar</option>
                                    <option value='adm'>Administrador</option>
                                </select>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td align='right'>
                            <label>Contrase&ntilde;a de Acceso:</label>
                        </td>
                        <td>
                            <div class='col-xs-7'>
                                <input class='form-control' type='password' id='contrasena' name='contrasena' style='color: #000000;'> 
                            </div>
                        </td>
                    </tr>
                    <tr> 
                        <td align='right'>
                            <label>Repetir Contrase&ntilde;a:</label>
                        </td>
                        <td>
                            <div class='col-xs-7'>
                                <input class='form-control' type='password' id='confirContrasena' name='confirContrasena'  placeholder='' style='color: #000000;'>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td align='right'>
                            <br>
                            <button id="boton" class="btn btn-primary" >Guardar</button>
                        </td>

                        <td align='left'>
                            <br>
                            &nbsp;&nbsp;
                            <a href='index.php'>
                                <input type="button" name="btnCancelar" value="Cancelar" class="btn btn-warning">
                            </a>
                        </td>
                    </tr>
                </table>
            </form>
            </div>
                </div>
            </div>
            <?php echo scriptspn('../../../');?>
            <script type='text/javascript' language='javascript' class='init'>
                </script>
        </body>

    <script>
$('#boton').click(function()
{
    var contrasena       = $("#contrasena").val();
    var confirContrasena = $("#confirContrasena").val();

    //console.log(contrasena+"   "+confirContrasena);
    if (contrasena !='' && confirContrasena != '') {

        if (contrasena === confirContrasena) {

            $("#noCoinciden").html('<h6 class="text-success">Las contraseñas coinciden.</h6>');
        }else{

            $("#noCoinciden").html('<h6 class="text-danger"><strong>Lo siento!</strong>, las contraseñas no coinciden.</h6>');
        }
    }else{
      $("#noCoinciden").html('<h6 class="text-warning"><strong>Hey!</strong> No dejes los campos vacios</h6>');
    }
});
</script>       
</html>
0

4 respuestas 4

1

Para realizar la validación con jquery puedes usar el plugin jquery validate. A continuación te dejo un ejemplo funcional.

$("#formCheckPassword").validate({
           rules: {
               password: { 
                 required: true,
                    minlength: 6,
                    maxlength: 10,

               } , 

                   cfmPassword: { 
                    equalTo: "#password",
                     minlength: 6,
                     maxlength: 10
               }


           },
     messages:{
         password: { 
                 required:"Password Requerido",
                 minlength: "Minimo 6 caracteres",
                 maxlength: "Maximo 10 caracteres"
               },
       cfmPassword: { 
         equalTo: "El password debe ser igual al anterior",
         minlength: "Minimo 6 caracteres",
         maxlength: "Maximo 10 caracteres"
       }
     }

});
<!DOCTYPE html>
<html>
<head>
 
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
   <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Demo</title>
</head>
<body>
<form id="formCheckPassword">
    <input type="password" class="form-control" name="password" id="password"/>
    <input type="password" class="form-control" name="cfmPassword" id="cfmPassword" />
    <input type="submit" value="submit"/>
 </form>

</body>
</html>

1

Intenta colocar preventDefault para que este no recargué la página

$('#boton').click(function(event){
event.preventDefault();    
    var contrasena       = $("#contrasena").val();
    var confirContrasena = $("#confirContrasena").val();

    //console.log(contrasena+"   "+confirContrasena);

    if (contrasena !='' && confirContrasena != '') {

        if (contrasena === confirContrasena) {

            $("#noCoinciden").html('<h6 class="text-success">Los campos coinciden.</h6>');
        }else{

            $("#noCoinciden").html('<h6 class="text-danger"><strong>Lo siento!</strong>, los campos no coinciden.</h6>');
        }
    }else{
      $("#noCoinciden").html('<h6 class="text-warning"><strong>Hey!</strong> No dejes los campos vacios</h6>');
    }
        
});

0

Intenta con esto:

// Validar el campo de la conrase;a
$('#boton').click(function()
{
    
    var contrasena       = $("#contrasena").val();
    var confirContrasena = $("#confirContrasena").val();

    //console.log(contrasena+"   "+confirContrasena);

    if (contrasena !='' && confirContrasena != '') {

        if (contrasena === confirContrasena) {

            $("#noCoinciden").html('<h6 class="text-success">Los campos coinciden.</h6>');
        }else{

            $("#noCoinciden").html('<h6 class="text-danger"><strong>Lo siento!</strong>, los campos no coinciden.</h6>');
        }
    }else{
      $("#noCoinciden").html('<h6 class="text-warning"><strong>Hey!</strong> No dejes los campos vacios</h6>');
    }
        
});
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="form-group">
                        <div class="col-xs-12">
                            <label class="control-label">contraseña</label>
                            <input class="form-control input-lg" type="password" id="contrasena" name="contrasena">
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-xs-12">
                            <label class="control-label">Confirmar contraseña</label>
                            <input class="form-control input-lg" type="password" id="confirContrasena" name="confirContrasena"  placeholder="">
                        </div>
                    </div>

                    <div class="form-group text-center m-t-40">
                        <div class="col-xs-12">
                            <button id="boton" class="btn btn-primary btn-lg w-lg waves-effect waves-light" >Validar</button>
                        </div>
                    </div>
<div id="noCoinciden"></div>

0

Yo lo hice con javascript:

$('#pass_1').keyup(function(){
    var _this = $('#pass_1');
    var pass_1 = $('#pass_1').val();
            _this.attr('style', 'background:white');
    if(pass_1.charAt(0) == ' '){
        _this.attr('style', 'background:#FF4A4A');
    }

    if(_this.val() == ''){
        _this.attr('style', 'background:#FF4A4A');
    }
});

$('#pass_2').keyup(function(){
    var pass_1 = $('#pass_1').val();
    var pass_2 = $('rpass_2').val();
    var _this = $('#pass_2');
            _this.attr('style', 'background:white');
    if(pass_1 != pass_2 && pass_2 != ''){
        _this.attr('style', 'background:#FF4A4A');
    }
});

Entonces, reemplazas 'pass_1' por el nombre que le pusiste al campo donde se ingresa la passwordy lo mismo en 'pass_2' en donde reemplazas por el nombre del campo donde repetira la password.

1
  • Tal como señala @Hernandez Mario debes usar ´event.preventDefault();´para que no recargue la página y puedas realizar la comprobación. Commented el 17 jun. 2018 a las 22:30

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.