2

Poseo para mis formularios tres acciones en Javascript, en este caso pondré el ejemplo del formulario de cambio de contraseña.

1) Al pulsar el botón de cambiar se comprueba que todos los campos estén llenos:

function validarCambio(){
        if($('#txtpassold').val()==""){
           $('#txtpassold').focus();
           alert("Debe ingresar la contraseña actual");
           return false
        }

        if($('#txtpassnew').val()==""){
           $('#txtpassnew').focus();
           alert("Debe ingresar la nueva contraseña");
           return false
        }

        if($('#txtpassnew2').val()==""){
           $('#txtpassnew2').focus();
           alert("Debe ingresar la verificación de la nueva contraseña");
           return false
        }
    }

2) Al pulsar ese mismo botón salta un mensaje de confirmar la acción de cambiar la contraseña, justo luego de la validación (no deja ni que se haga el focus del primer JS):

function confirmarCambio()
{
  var agree=confirm("¿Esta seguro que desea cambiar la contraseña?");
  if (agree)
  return true ;
else
   return false ;
}

3) Para evitar que usen la acción de cambiar la contraseña colocando directamente la dirección URL desactivando el javascript y pasando por las validaciones, cambie el SUBMIT por un BUTTON y le asigno una tercera función de javascript que coloca en 1 un value de una caja de texto oculta y luego hace el submit del formulario, cuando llega al formulario ACTION.php este verifica el valor, si es 1 hace el post, si es 2 te devuelve

function cambiando() {
document.getElementById("cambio").value = 1;
document.cambiar_contrasena.submit();
}

El problema:

1) A pesar de que la 1ra acción (validarcambio) comprueba los valores, la 2da acción (confirmarCambio) te muestra el alert de una vez y no te hace el focus en la caja de texto que esta vacía

2) Si llegas a pulsar que aceptas el cambio, este pasara a la 3ra acción y enviara el formulario colocando en 1 el value y haciendo correctamente todo como debería, pero como la contraseña estaba vacía te dirá que no puede cambiar la contraseña y saltara el error de PHP de un POST con campos vacíos.

EN FIN: Quisiera lo siguiente:

Pulsas CAMBIAR: se verifican todos los campos, si alguno esta vació se hace el focus y se cancelan TODOS LOS SCRIPTS SIGUIENTES

Si están todos los campos llenos y le das al BOTÓN te mostrara el mensaje, si le das que no, NO EJECUTA MAS NADA (no envía el formulario), si le das que si, se envía el formulario, colocando en 1 el valué oculto.

<input type="button" name="cambiar" id="cambiar" onclick="validarCambio();confirmarCambio();cambiando();" value="Cambiar"/>
1
  • No sería mejor realizar las funciones en el onsubmit del form ?
    – Dev. Joel
    Commented el 28 mar. 2017 a las 15:07

3 respuestas 3

2

Te sugiero lo siguiente:

    /* El valor true o false retornado en esta función indicara 
   si se procesa o cancela (respectivamente) el submit */
   function ValidarForm() {
       if(!validarCambio()) {
          return false;
       } else if (confirmarCambio()) {
          document.getElementById("cambio").value = 1;
          return true;
       } else return false;
    }

Tu formulario

<form onsubmit="return ValidarForm()" method="[get or post]" action="[tuscript]">
   <!-- Todos los tags del formulario -->
    <input type="submit" name="cambiar" id="cambiar" value="Cambiar"/>
</form>

Para los casos que el formulario se envía con un submit hago uso del onsubmit para permitir continue o no según las validaciones realizadas (esto del lado del cliente/visitante) Mira esto del onsubmit

1
  • gracias por tu respuesta
    – Dev 200
    Commented el 28 mar. 2017 a las 16:37
1

El problema de tu código es que al hacer click en el botón comienza una carrera entre las funciones para ejecutarse, y como te esta sucediendo se disparan unas antes que otras y se pierde el control de la secuencia que estas buscando. Yo recomendaría que todo quedara dentro de una sola función.

function validarCambio() {
    if ($('#txtpassold').val() == ""
         || $('#txtpassnew').val() == ""
         || $('#txtpassnew2').val() == "") {
         \\ Aca se puede buscar cual fue el error puntual y personalizar la alerta
        alert("Error");
        return false
    } else {
         \\ Solo cuando paso los chequeos seguimos con la verificacion
        var agree = confirm("¿Esta seguro que desea cambiar la contraseña?");

        if (agree)
            document.getElementById("cambio").value = 1;
        document.cambiar_contrasena.submit();
        else
            return false;
    }
}
1
  • asi lo configure
    – Dev 200
    Commented el 28 mar. 2017 a las 16:34
1

Tendrías que modificar el return de tu función validarCambio() para que por defecto retorne TRUE, cuando haya saltado todas las comparaciones de los input, además hice una modificación en la función confirmarCambio() para que retorne directamente la variable y no hacer comparaciones.

$(function() {
    $(document).on('click', '#enviar', function(event) {
        if(validarCambio()){
            if(confirmarCambio()){
                console.log("Correcto , Enviar Form");

            }
            else
                console.log("No acepto Confirmación");
        }
        else
            console.log("Campos Vacíos");
        event.preventDefault();
       
    });
});

function validarCambio(){
    if($('#txtpassold').val()==""){
       $('#txtpassold').focus();
       alert("Debe ingresar la contraseña actual");
       return false
    }

    if($('#txtpassnew').val()==""){
       $('#txtpassnew').focus();
       alert("Debe ingresar la nueva contraseña");
       return false
    }

    if($('#txtpassnew2').val()==""){
       $('#txtpassnew2').focus();
       alert("Debe ingresar la verificación de la nueva contraseña");
       return false
    }
   return true;
}

function confirmarCambio()
{
  var agree= confirm("¿Esta seguro que desea cambiar la contraseña?");
  return agree;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form >
    <input type="password" name="txtpassold" id="txtpassold" value="">
    <input type="password" name="txtpassnew" id="txtpassnew" value="">
    <input type="password" name="txtpassnew2" id="txtpassnew2" value="">
    <input type="button" name="enviar" value="enviar" id="enviar">
</form>

1
  • gracias por el aporte, esta tambien muy completa tu respuesta
    – Dev 200
    Commented el 28 mar. 2017 a las 16:37

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.