validar - ¿Cómo agregar una función ''submitHandler'' cuando se usa la validación jQuery Unobtrusive Validation?

validar formulario jquery validate

Question

Estoy validando un formulario utilizando las nuevas características de validación discretas en ASP.NET MVC 3.

Entonces no hay ningún código que haya escrito para configurar jQuery validate para comenzar a validar mi formulario. Todo se hace cargando la biblioteca jQuery.validate.unobtrusive.js.

Desafortunadamente, tengo que golpear un ''¿estás seguro?'' cuadro de mensaje cuando el formulario es válido pero antes de enviarlo. Con jQuery validate agregarías la opción handleSubmit al inicializar así:

$("#my_form").validate({
  rules: {
    field1: "required",
    field1: {email: true },
    field2: "required"
  },
  submitHandler: function(form) {
     if(confirm(''Are you sure?'')) {
       form.submit();
     }
  }
});

Pero no necesita inicializar cuando usa la biblioteca discreta.

¿Alguna idea de dónde / cómo puedo agregar un controlador de envío en ese caso?

Gracias

Answer 1

Basé esto en la respuesta original, que no funcionó para mí. Creo que las cosas han cambiado en jQuery.

Como de costumbre, tome este código y agregue una copiosa verificación de errores: DI utiliza un código similar para evitar los envíos dobles en nuestros formularios, y funciona bien en IE8 + (a partir de mvc4 y jquery 1.8.x).

$("#myFormId").confirmAfterValidation();

// placed outside of a $(function(){ scope
jQuery.fn.confirmAfterValidation = function () {
    // do error checking first.  should be null if no handler already
    $(this).data(''validator'').settings.submitHandler = confirmValidForm;
};

function confirmValidForm(form) {
    var validator = $(this);
    var f = $(form);
    if (confirm("really really submit?")) {
        // unbind so our handler doesn''t get called again, and submit
        f.unbind(''submit'').submit();
    }
        // return value is _ignored_ by jquery.validate, so we have to set
        // the flag on the validator itself, but it should cancel the submit
        // anyway if we have a submitHandler
        validator.cancelSubmit = true;
    }
}

Answer 2

Encontré esta pregunta mientras buscaba una manera de establecer invalidHandler , a diferencia del submitHandler . Curiosamente, no puede establecer invalidHandler de la misma manera cuando se usa una validación discreta.

La función no se activa cuando se detecta un formulario no válido:

$("form").data("validator").settings.invalidHandler = function (form, validator) {
    alert(''invalid!'');
};

Este enfoque funciona:

$("form").bind("invalid-form.validate", function () {
  alert(''invalid!'');
});

Parece deberse a la forma en que el script jquery.validate.unobtrusive.js inicializa el complemento Validate , y la forma en que el complemento invoca al controlador.

Answer 3

La biblioteca no intrusiva adjuntará el validador en todos los formularios, por lo que debe reemplazar el submitHandler de esta manera:

$("form").data("validator").settings.submitHandler = function (form) { alert(''submit''); form.submit(); };

Answer 4

Los siguientes hallazgos pueden ser de interés para entender la diferencia entre:

submitHandler : se llama cuando el formulario se valida con éxito, justo antes de la devolución del servidor
invalidHandler : se invoca si la validación falla y no hay una publicación posterior

La solución de @ DGreen definitivamente parece ser la mejor manera de inyectar un manejo especial si la validación del formulario falla y necesita hacer algo como mostrar un resumen de validación emergente ( invalidHandler )

$("form").bind("invalid-form.validate", function () {
  alert(''invalid!'');
});

La solución @PeteHaus es la mejor manera de hacer algo si quiere evitar la devolución de un formulario validado con éxito ( submitHandler )

$("form").data("validator").settings.submitHandler = function (form) { 
                                                     alert(''submit''); form.submit(); };

Sin embargo, estaba un poco preocupado sobre qué comportamiento estaba anulando (o no anulando) vinculando al método .validate esta manera, y por qué tenía que hacer cada camino de manera diferente. Así que revisé la fuente. Recomiendo encarecidamente a cualquiera que quiera comprender este procedimiento que lo haga también más: ponga algunas declaraciones de "alerta" o declaraciones de "depurador" y es bastante fácil seguirlo *

De todos modos, resulta que cuando el manejador jquery.validate.unobtrusive inicializa el complemento jquery.validate lo hace en el método parseElement() recuperando las opciones creadas por el método validationInfo() .

ValidationInfo() devuelve las opciones de esta manera:

 options: {  // options structure passed to jQuery Validate''s validate() method
             errorClass: "input-validation-error",
             errorElement: "span",
             errorPlacement: $.proxy(onError, form),
             invalidHandler: $.proxy(onErrors, form),
             messages: {},
             rules: {},
             success: $.proxy(onSuccess, form)
           },

El método onErrors() en jquery.validate.unobtrusive es responsable de crear dinámicamente el panel de resumen de validación para MVC. Si no está creando un panel de resumen de validación (con @Html.ValidationSummary() que por cierto debe estar contenido en el cuerpo de FORMULARIO), este método es completamente inerte y no hace nada para que no tenga que preocuparse.

function onErrors(event, validator) {  // ''this'' is the form elementz
    var container = $(this).find("[data-valmsg-summary=true]"),
        list = container.find("ul");

    if (list && list.length && validator.errorList.length) {
        list.empty();
        container.addClass("validation-summary-errors").removeClass("validation-summary-valid");

        $.each(validator.errorList, function () {
            $("<li />").html(this.message).appendTo(list);
        });
    }
}

Si realmente lo deseas, puedes desvincular el controlador jquery.validate.unobtrusive esta manera, pero no me molestaría.

 $("form").unbind("invalid-form.validate"); // unbind default MS handler

Si te preguntas por qué funciona esto

 $("form").data("validator").settings.submitHandler = ...

y esto no funciona

 $("form").data("validator").settings.invalidHandler = ...

es porque submitHandler se llama jquery.validate dentro de jquery.validate cuando se realiza la validación. Por lo tanto, no importa en qué punto está establecido.

 validator.settings.submitHandler.call( validator, validator.currentForm );

pero el invalidHandler está ligado a un evento durante init() así que si lo configuras en tu propio código ya es demasiado tarde

if (this.settings.invalidHandler)
    $(this.currentForm).bind("invalid-form.validate", this.settings.invalidHandler);

¡Un pequeño paso por el código hace que a veces se entienda mucho! Espero que esto ayude

* Asegúrese de que no tenga la minificación en paquetes habilitados.

Answer 5

Prefiero inyectar un manejador de eventos, para que pueda estar obligado a ... :)

//somewhere in your global scripts
$("form").data("validator").settings.submitHandler = function (form) {
    var ret = $(form).trigger(''before-submit'');
    if (ret !== false) form.submit();
};

De esta manera, puedo unirlo en cualquier lugar que se necesite ...

//in your view script(s)
$("form").bind("before-submit", function() {
    return confirm("Are you sure?");
});