sábado, 16 de mayo de 2015

Cómo resolver el problema de "el formulario rebelde"

Supón que tienes que resolver un problema en el que tienes un formulario con un botón submit, pero... quieres validar este formulario antes de que se envíe, quieres validar algo muy particular, no puedes enviarlo por ajax porque quieres seguir la tendencia de código que tiene el sistema, quieres enviarlo normal por post o get da igual, supongamos que tenemos el siguiente html:

<form id="rebelde" method="post">
<input type="text" name="input1" id="input1">
<button id="ok" type="submit">Ok</button>
</form>

Entonces quieres validarlo usando jQuery (lean los comments del code)

<script>
$(function(){
    $("button#ok").click(function(e){
        e.preventDefault(); //para que nuestro form no se vaya antes de validarlo
        //codigo de validacion
        //if no valido return false y listo :)
        //else ... ??? y ahora cómo hacemos que el form SI se envíe??
   });
});
</script>

En serio lean los comments del code si no pues no comprenderán...

Aquí nos topamos con un problema porque normalmente para enviarlo yo haría algo como
$("button#ok").submit(); //no funciona
$("button#ok").click(); //no funciona
$("form").submit(); //no funciona

¿Por qué? las dos primeras formas porque estas haciendo un e.preventDefault sobre le boton por lo que no se enviará... la tercera no estoy bien seguro... ¿qué hacemos?...

Bueno mi solución fué la siguiente (lean el comentario en el code):

<form id="rebelde" method="post">
<input type="text" name="input1" id="input1">
<button id="ok" type="button">Ok</button> <!-- cambiamos a type button -->
</form>

Cambiamos a type button el button del html :) y nuestro JS quedará así:

<script>
$(function(){
    $("button#ok").click(function(){
        //codigo de validacion
        //if no valido return false y listo :)
        //else ... $(this).attr("type", "submit").click();
   });
});
</script>

EUREKA!! Ahora sí funciona :D, pero si ponemos la consola con console.log dentro del evento click notaremos que se ejecuta un montón de veces (a lo mejor es mi versión de jQuery, pero eso es lo que ví) ¿cómo se soluciona? ... easy:

<script>
$(function(){
    $("button#ok").click(function(){
        if ($(this).attr("type") == "button") {
            //codigo de validacion
            //if no valido return false y listo :)
            //else ... $(this).attr("type", "submit").click();
       }
   });
});
</script>

Y listo... si conocen una forma mejor... compartan por favor :D

No hay comentarios:

Publicar un comentario