[SOLUCIONADO] Validar formulario para abrir modal

[JavierMMM]

Hola a todos, resulta que tengo un formulario el cual abre una modal para verificar datos y si son correctos enviarlos a procesarlos en BD. Hasta este punto todo bien.

Lo que no he podido hacer es, validar mi formulario antes de abrir la modal para evitar que vayan datos nulos. El cógigo que utilizo es el siguiente:

Código Javascript:

$('#btn_confirm').on("click", function(event){
 
                var form = $( "#frmsol");
                if (form.valid() != true) {
                    console.log("No Validooo");
                } else {
                
                    //******************************
                    var axin = 7;
 
                    if ($("#ngrupos").val()=="") {
                        $("#ngrupos").val($("#ngruposph").val());
                    };
 
                    $.post("solicitud_control.php",{id_curso_hc: $("#id_curso_hc").val(),id_tutor_responsable: $("#id_profesor_resp").val(), axn: axin, escuela_clave: $("#lst_materias option:selected").attr('escuela_clave'),  ngrupos: $("#ngrupos").val(), id_usuario: <?php echo $id_profesor;?>,lst_materias: $("#lst_materias option:selected").text(), lst_materias1: $("#lst_materias1").val(), fi: $("#fi").val(), ff: $("#ff").val(), ntutor: $("#ntutor").html(), codcursos: $("#codcursos").val(), obs: $("#obs").val(), grupo_insc: $("#grupo_insc").val(), grado: $("#grado_insc").val(), text_ciclo: $("#ciclo option:selected").text(), grupo: $("#grupo_insc").val(), tcurso: $("#t_curso").val()}).done(function(data){
                    $("#myModal").modal('show');
                    $("#mBody").empty().append(data);
                    });
 
                    $('#btn_salvar').on('click', function(event){
                        window.location = "index.php";
                    });
                    //******************************
 
                }
            });
 

pero hasta ahora no me respeta y abre la modal. Utilizo un boton y no un submit, y este lo coloco fuera del formulario, ya que si está dentro, trabaja como submit.

Alguien tiene ídea de lo que estoy haciendo mal.

Gracias de antemano.

[Alexis88]

Para empezar, haces mal al usar un botón externo en lugar del <input type="submit" /> que es el elemento nativo para enviar a un formulario a procesarse. Lo que debes de hacer es cancelar el envío para luego validar.

Código Javascript:

$("#id_formulario").on("submit", function(event){
    event.preventDefault(); //Cancelo el envío
    //Acá realizarás la validación y envío
});
 

La cancelación del evento se realiza con el método preventDefault.

Saludos

[GeekGirl]

Hola Javier, cómo estás?

Hago un par de correcciones a tu código. La manera correcta de recoger el onsubmit de un formulario es haciendo referencia al formulario en sí. Y para detener el envío del mismo hasta que valide simplemente podés hacer un return false.

Te paso un ejemplo cortito de lo que quiero decir para que te hagas una idea y puedas implementarlo en tu código:

Código HTML:

<script type="text/javascript">
	$('#frmsol').on("submit", function(event){
                // Haces referencia a $(this) ya que fue el submit del form el que desencadenó la ejecución de la función
        	if ($(this).valid() != true) {
		    console.log("No Validooo");
		    return false;
		} else {
                    console.log('valida');
                }
	});
</script> 

Espero te sirva. Saludos!

[JavierMMM]

He estado haciendo ajustes a mi código, y he tomado consejo de ambos así como me he metido un poco a investigar. Trato de hacerlo lo mejor posible, pero me topo con la siguiente cuestión. Este es el código que tengo actualmente:

Código Javascript:

$('#frmsol').on("submit", function(event){
 
    if ($("#ngrupos").val()=="") {
        $("#ngrupos").val($("#ngruposph").val());
    };
 
    id_curso_hc = $("#id_curso_hc").val();
    id_profesor_resp = $("#id_profesor_resp").val();
    lst_materias_attr = $("#lst_materias option:selected").attr('escuela_clave');
    ngrupos = $("#ngrupos").val();
    id_usuario = <?php echo $id_profesor;?>;
    lst_materias_text = $("#lst_materias option:selected").text();
    lst_materias1 = $("#lst_materias1").val();
    fi = $("#fi").val();
    ff = $("#ff").val();
    ntutor = $("#ntutor").html();
    codcursos = $("#codcursos").val();
    obs = $("#obs").val();
    grupo_insc = $("#grupo_insc").val();
    grado_insc = $("#grado_insc").val();
    ciclo = $("#ciclo option:selected").text();
    grupo = $("#grupo_insc").val();
    t_curso = $("#t_curso").val();
 
 
    validar(id_curso_hc, id_profesor_resp, lst_materias_attr, ngrupos, id_usuario, lst_materias_text, lst_materias1, fi, ff, ntutor, codcursos, obs, grupo_insc, grado_insc, ciclo, grupo, t_curso);
                        
});
 

lo que sucede es que al hacer "submit", me muestra la modal con los datos que requiero, pero se envían los datos, no se detiene a revisarlos.

¿Qué puedo hacer para que respete la modal?

Gracias de antemano.

[GeekGirl]

Podrías compartir también la función validar? Porque en ese código solo que pusiste no veo ningún return que controle el flujo del envío.

Saludos :)

[Alexis88]

Iniciado por JavierMMM

lo que sucede es que al hacer "submit", me muestra la modal con los datos que requiero, pero se envían los datos, no se detiene a revisarlos.

Eso sucede porque no evitas que el evento submit prosiga. Te vuelvo a repetir, necesitas controlar su accionar utilizando el método preventDefault.

Código Javascript:

$('#frmsol').on("submit", function(event){
    event.preventDefault(); //Prevengo el funcionamiento normal del evento
 
    //El resto de instrucciones
}
 

Saludos

[JavierMMM]

Hola de nuevo, tiene razón Alexis88, omití poner esa línea

Código HTML:

event.preventDefault();

funciona a la perfección.

GeekGirl, uso el validate de jQuery

Mi código queda de la siguiente manera:

Código Javascript:

$('#frmsol').on("submit", function(event){
        event.preventDefault();
     
        if ($("#ngrupos").val()=="") {
            $("#ngrupos").val($("#ngruposph").val());
        };
     
        id_curso_hc = $("#id_curso_hc").val();
        id_profesor_resp = $("#id_profesor_resp").val();
        lst_materias_attr = $("#lst_materias option:selected").attr('escuela_clave');
        ngrupos = $("#ngrupos").val();
        id_usuario = <?php echo $id_profesor;?>;
        lst_materias_text = $("#lst_materias option:selected").text();
        lst_materias1 = $("#lst_materias1").val();
        fi = $("#fi").val();
        ff = $("#ff").val();
        ntutor = $("#ntutor").html();
        codcursos = $("#codcursos").val();
        obs = $("#obs").val();
        grupo_insc = $("#grupo_insc").val();
        grado_insc = $("#grado_insc").val();
        ciclo = $("#ciclo option:selected").text();
        grupo = $("#grupo_insc").val();
        t_curso = $("#t_curso").val();
     
     
        validar(id_curso_hc, id_profesor_resp, lst_materias_attr, ngrupos, id_usuario, lst_materias_text, lst_materias1, fi, ff, ntutor, codcursos, obs, grupo_insc, grado_insc, ciclo, grupo, t_curso);
                           
    });
 

Gracias por su apoyo