0

Hola estoy tratando de capturar el valor de un input type password, pero no he podido

es un form para editar perfiles de usuarios, entonces traigo de la base de datos el nombre y el correo, pero no traigo al contraseña, porque quiero colocarle una contraseña nueva y enviar los nuevos datos a la base de datos, entonces cuando escribo una contraseña nueva en el input y trato de capturarla con jquery para pasarla por la función se dispara la alerta diciendome que el campo está vacío (soy bastante nuevo en esto asi que no se si lo que estoy haciendo está bien o no)

Gracias por su respuesta.

<div class="modal fade modalnuevoUsuario" id="perfil'.$item["id"].'" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content rounded-0">
                        <div class="modal-header">
                            <h5 class="tituloModal">Editar Perfil</h5>
                        </div>
                        <div class="modal-body">
                         <form class="editarformNuevoUsuario" method="post" onsubmit="return validarEditarPerfil()">
                                <input type="hidden" name="idNuevoUsuario" value="'.$item["id"].'">
                                <div class="form-group mb-0">
                                    <input type="text" class="editarNombreNuevoUsuario mb-3 form-control" name= "editarNombreNuevoUsuario" value= "'.$item["usuario"].'" placeholder="Ingrese el nombre de usuario">

                                    <input type="password" name="EditarPasswordNuevoUsuario" class="EditarPasswordNuevoUsuario mb-3 form-control" placeholder="Ingrese la contraseña">

                                    <input type="email" value="'.$item["email"].'" name="EditarEmailNuevoUsuario" class="EditarEmailNuevoUsuario form-control" placeholder="Ingrese el correo electronico">
                                </div>
                                <div class="col-12 p-0 d-flex justify-content-center">
                                    <input type="submit"  class="col-12 btn btn-primary" style="margin-bottom: 10px"value="Actualizar perfil">
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-danger mt-0 cerrarModal" data-dismiss="modal">Cerrar</button>
                        </div>
                    </div>
                </div>
            </div>';

Aqui el codigo js

function validarEditarPerfil(){

    var formValidarEditarPerfil = [
        $(".editarNombreNuevoUsuario").val(),
        $(".EditarPasswordNuevoUsuario").val(),
        $(".EditarEmailNuevoUsuario").val()
    ];


    for(var i=0; i<formValidarEditarPerfil.length; i++){
        if(formValidarEditarPerfil[i].trim()==""){
            $(".alertaMessage").remove();
            $(".form-group").after('<div class="mb-0 mt-3 alert alert-danger alertaMessage text-center">* <b>¡ERROR!</b> Todos los campos son obligatorios</div>');
            return false;
        }
    } 

    if(formValidarEditarPerfil[0] != ""){
        var expresion = /^[a-zA-Z0-9]*$/;

        if(!expresion.test(formValidarEditarPerfil[0])){
            $(".alertaMessage").remove();
            $(".form-group").after('<div class="mb-0 alert alert-danger alertaMessage text-center">* <b>¡ERROR!</b> No se permiten caracteres especiales como * / > - < .,,</div>');
            return false;
        }
    }

     if(formValidarEditarPerfil[1] != ""){

          var expresionPassword =/^(?=.*\d)(?=.*[\u0021\u002B\u0040\u002d\u005F])(?=.*[A-Z])(?=.*[a-z])\S{8,17}$/;
         if(!expresionPassword.test(formValidarEditarPerfil[1])){
            $(".alertaMessage").remove();
            $(".form-group").after('<div class="mb-0 mt-3 alert alert-danger alertaMessage text-center">* <b>¡ERROR!</b> La contraseña debe tener entre 8 y 17 caracteres, al menos un numero, al menos una minúscula, al menos una mayúscula y al menos uno de estos caracteres !+@-_</div>');
            return false;
         }
     }

    return true;

}
4
  • Faltaría ver la parte de javascript
    – Fly
    el 4 dic. 2018 a las 9:05
  • El valor de un input type="password" se captura exactamente igual que el valor de un input type="email" o un input type="text", por lo que manejando estos tipos de input en tu formulario no deberías de tener problemas en capturar un tipo password.
    – phpMyGuel
    el 4 dic. 2018 a las 9:08
  • Aparte de lo que ya se ha comentado, por lo general los campos de password se requiere que el usuario los ingrese dos veces, para asegurarse de que el mismo usuario ha escogido un password del que se acordará luego, y para evitar que escriba mal alguna letra por descuido y resulte que está seteando un password que no le funcionará jamás.
    – A. Cedano
    el 4 dic. 2018 a las 11:45
  • Se me olvido agregar el js, ahora si lo puse el 5 dic. 2018 a las 3:17

1 respuesta 1

3

Para efectuar lo que solicitas únicamente tendrías que ejecutar $('.EditarPasswordNuevoUsuario').val()pudiendo obtener el valor del input con clase EditarPasswordNuevoUsuario.

Te pongo un ejemplo:

$('.editarformNuevoUsuario').on('submit', (event) => {
  console.log($('.EditarPasswordNuevoUsuario').val());
  event.preventDefault();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal fade modalnuevoUsuario" id="perfil'.$item["id"].'" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content rounded-0">
                        <div class="modal-header">
                            <h5 class="tituloModal">Editar Perfil</h5>
                        </div>
                        <div class="modal-body">
                         <form class="editarformNuevoUsuario" method="post">
                                <input type="hidden" name="idNuevoUsuario" value="'.$item["id"].'">
                                <div class="form-group mb-0">
                                    <input type="text" class="editarNombreNuevoUsuario mb-3 form-control" name= "editarNombreNuevoUsuario" value= "'.$item["usuario"].'" placeholder="Ingrese el nombre de usuario">

                                    <input type="password" name="EditarPasswordNuevoUsuario" class="EditarPasswordNuevoUsuario mb-3 form-control" placeholder="Ingrese la contraseña">

                                    <input type="email" value="'.$item["email"].'" name="EditarEmailNuevoUsuario" class="EditarEmailNuevoUsuario form-control" placeholder="Ingrese el correo electronico">
                                </div>
                                <div class="col-12 p-0 d-flex justify-content-center">
                                    <input type="submit"  class="col-12 btn btn-primary" style="margin-bottom: 10px" value="Actualizar perfil">
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-danger mt-0 cerrarModal" data-dismiss="modal">Cerrar</button>
                        </div>
                    </div>
                </div>
            </div>

Pd: en Jquery normalmente se tiende a obtener los eventos suscribiendote a ellos de la siguiente manera: $(control).on(evento, function) por ello he quitado del form la función onsubmity en el ejemplo me he suscrito al evento submit del form .editarformNuevoUsuario

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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