сравнивать пароли перед тем, как переходить к тому, чтобы вводить

У меня есть формуляр, где регистрируется пользователь, но я хочу, чтобы перед тем, как переходить в страницу, где он идет вводить, он сравнил input Пароля и Подтверждать пароль я это попробовал с несколькими примерами, которые я увидел, но они я не функционируют.

Меня не выполняет сравнение:

<?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
задан 03.07.2016, 03:58
3 ответа

Чтобы реализовывать ее validaciГіn с jquery ты можешь использовать plugin jquery санкционируй тебя. В continuaciГіn я оставляю тебе функциональный пример.

$("#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
ответ дан 24.11.2019, 13:57

Попробуй размещать preventDefault для того, чтобы этот я не перезагрузил страницу

$('#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>');
    }
        
});
1
ответ дан 24.11.2019, 13:57

Он пробует с этим:

// 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
ответ дан 24.11.2019, 13:57

Теги

Похожие вопросы