0

Tengo un formulario bastante grande. Algunos de los campos los he divido por secciones y se pueden ocultar con Toggle() para que no molesten mientras se rellenan los demás campos. El prolema aparece cuando el usuario envia los datos. Al hacer click en submit se hace una validacón automática y obtengo errores como este.

An invalid form control with name='Name' is not focusable.

Pensaba que haciendo algo así lo podría solucionar:

$("#form").on("submit" ,function()
{   
    for(var i=0; i<7;i++)
    {
        var id = "#toggle"+ (i+1);
        $(id).addClass("show");

    }   
});

Pero en este caso el método no se llega a ejecutar porque los errores aparecen primero.

También he intentado hacerlo así, sustituyendo el submit por un botón normal:

$("#enviar").on("click" ,function()
{
    for(var i=0; i<7;i++)
    {
            var id = "#toggle"+ (i+1);
            $(id).addClass("show");
    }
    $("#form").submit();
});

En este otro caso no tengo errores pero el formulario se envia sin ser validado.

¿Alguna forma de ejecutar el método antes de que se haga la validación del formulario? Es decir, ejecutarlo para que no haya errores y además sin perder la validación.

4
  • con que estas validando??? Commented el 1 feb. 2019 a las 22:13
  • Lo único que tengo puesto es la etiqueta "required" en algunos campos para asegurarme de que no se quedan vacios.. Commented el 1 feb. 2019 a las 22:16
  • Que tiene tu clase show de css pk parece ser que nos e valida pk no se estan mostrando a la hora de hacer el submit Commented el 1 feb. 2019 a las 22:17
  • No lo sé... es una clase de bootstrap... al añadir esa clase hace que el Toggle se abra. Si es exactamente por eso!! por eso quiero abrirlos todos antes de hacer el submit Commented el 1 feb. 2019 a las 22:19

4 respuestas 4

1

Puedes quitar el boton de submit ya que no lo usas, y al final en lugar de hacer un $("#submit").click(); haces un $("#form").submit();

0

Porque no en lugar de un boton submit colocas uno normal con una funcion onclick

 function enviar(){
  var formulario = document.getElementById("myform");   
  //Aqui tu codigo para mostrar tus objetos
  formulario.submit();
}
8
  • voy a probar... a ver si así no no se pierde la validación... Ahora te digo si funciona... Commented el 1 feb. 2019 a las 22:32
  • Al hacerlo como tu dices no se envia el formulario... Se abren todo los toogels pero el submit no funciona!! Commented el 1 feb. 2019 a las 22:41
  • Y te dice algún error en la consola talvez no estas tomando bien el formulario? intenta con : document.forms["myform"].submit();
    – rances5171
    Commented el 1 feb. 2019 a las 22:54
  • Si, me sale este error formulario.submit is not a function Commented el 1 feb. 2019 a las 22:55
  • Quitaste el boton de submit que tenias? asegurate de cambiar el tipo del botón no le dejes submit
    – rances5171
    Commented el 1 feb. 2019 a las 23:02
0

Lo he solucionado de esta forma. Ocultando el submit y haciendo click en él a través de otro botón después de desplegar todos los toggles.

<button type="submit" value="Submit" name="submit" id="submit" style="visibility:hidden">Enviar</button> 

<button type="button" id="btn"">Enviar</button>

$("#btn").on("click" ,function()
{

    for(var i=0; i<7;i++)
    {
        var id = "#toggle"+ (i+1);
        $(id).addClass("show");
    }
    $("#submit").click();
});

De esta forma he conseguido que no salgan errores y no perder la validación automática del formulario.

Pero si alguien sabe otro camino mas "elegante" para hacer lo mismo sería estupendo que lo dijera.

0

No se jQuery pero con Javascript puedes utilizar event.preventDefault() para cancelar un evento, es decir, no hacer el submit. Así puedes ejecutar el método antes de enviarlo. Aquí está en la documentación de jQuery.

1
  • Gracias por la ayuda @Tiveruis, pero quería conservar el comportamiento por defecto que era la validación del formulario... al final conseguí hacerlo ocultando el submit... por ahí puse la respuesta. Saludos!! Commented el 4 feb. 2019 a las 16:42

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.