formulario - ventana modal jquery

jQuery en la validación de envío, con diálogo modal al final?

Question

Tengo un formulario en el momento que me gustaría validar, y suponiendo que todo sea correcto, me gustaría que aparezca un diálogo que confirme sus detalles, aquí hay un ejemplo del código que tengo hasta ahora:

var userConfirmed = false;

$("#dialog").dialog({
    buttons: {
        "Yes": function() {
            userConfirmed = true;
            $("#inputform").submit();
        },
        "No, I''ll change them.": function() {
            $(this).dialog("close");
        }
    }
});

// check they''ve submitted what they need to
$("form").submit(function() {

    // lots of these
    if (something) {
        return false;
    }

    $("#dialog").dialog("open");

    return userConfirmed;

});

La validación inicial funciona bien: comprueba los criterios y los indicadores según corresponda, y si no se cumple ninguno de estos criterios, mostrará el cuadro modal como yo quiera. Hasta aquí todo bien.

Sin embargo, el problema es cuando presiono ''sí'' para enviar el formulario, no se envía, hasta que presiona el botón ''enviar'' de nuevo, argh! Cualquier llamada para enviar el foro usando jQuery falla.

Cualquier sugerencia sería muy bienvenida, gracias.

Answer 1

Adjuntaría el evento a un botón en lugar de a un formulario. Simplemente adjúntelo a un botón de enviar, haga clic. Luego puede usar event.preventDefault() para evitar que el formulario se event.preventDefault() hasta que se confirme el diálogo. En la función ''Sí'', simplemente ponga $(''form'').submit() . No hay necesidad de preocuparse por el valor de retorno de esa manera tampoco.

Answer 2

Agregue una bandera en algún lugar que indique si el cuadro de diálogo ya apareció y el usuario hizo clic en sí. Ejemplo:

var userConfirmed = false;
$("form").submit(function(e) {
    if ( userConfirmed ) {
        userConfirmed = false; // Reset it to false
        return true; // No need to validate anything, that was already done last time
    }
    var form = $(this);
    // ...
        "Yes": function() {
            userConfirmed = true; // Confirm that the dialog was shown and the user clicked "Yes"
            $(this).dialog("close");
            form.submit(); // Try again; this time, the validation was already done
        },
    // ...
    return false; // Don''t submit; the user haven''t confirmed the info on the dialog
});

Sin esa bandera, estarías en una situación de gallina y huevo: el envío abre el cuadro de diálogo y el cuadro de diálogo que invoca $("form").submit() vuelve a abrir el cuadro de diálogo ...

Si tiene muchos formularios y no desea utilizar una var "global", puede usar data para el mismo propósito.

Actualización: ejemplo en vivo en jsFiddle . Probado con éxito en Chrome y Firefox (se mostrará una página en blanco 3 segundos después del envío).

Answer 3

El hecho de que se abra el diálogo no detiene la ejecución del código. valToReturn es devuelto por $("form").submit() incluso antes de que se establezca.

Podrías hacer algo como esto:

//Save the default behavior to break any loops
var defaultSubmit = $.extend(true, {}, $("form").submit);

$("form").submit(function(e) {

    var valToReturn = true;

    // lots of these
    if (something) {
        return false;
    }

    // popup the dialog confirmation
    $("#dialog").dialog({
        buttons: {
            "Ok": function() {
                $(this).dialog("close");
                defaultSubmit(); // User confirmed, submit form.
            },
            "Cancel": function() {
                $(this).dialog("close"); // Form already prevented from submitting. Exit quietly.
            }
        }
    });

    $("#dialog").dialog("open");

    return false; // Prevent form from being submitted

});

Answer 4

como siempre recomiendo el uso jQuery validar para la validación, entonces el código se vería así

$("#formid").validate({
    submitHandler: function(form) {
               $("#dialog").dialog({
     buttons: {
         "Ok": function() {
             form.submit();
             $(this).dialog("close");
         },
         "Cancel": function() {
             $(this).dialog("close");
         }
     }
});
    }
});

DEMO EN VIVO