capture value of a password type input

0

Hi, I'm trying to capture the value of an input type password, but I could not

is a form to edit user profiles, then I bring the name and email from the database, but I do not bring the password, because I want to put a new password and send the new data to the database, then when I write a new password in the input and I try to capture it with jquery to pass it through the function it triggers the alert telling me that the field is empty (I'm quite new in this so I do not know if what I'm doing is ok or not)

Thanks for your reply.

<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>';

Here the code 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;

}
    
asked by J P 04.12.2018 в 09:53
source

1 answer

2

To do what you request, you would only have to execute $('.EditarPasswordNuevoUsuario').val() , being able to obtain the value of the input with class EditarPasswordNuevoUsuario .

I'll give you an example:

$('.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: in Jquery normally you tend to get the events by subscribing to them in the following way: $(control).on(evento, function) therefore I removed the function onsubmit from the form and in the example I subscribed to the submit event of the form .editarformNuevoUsuario

    
answered by 04.12.2018 / 10:11
source