Wie fügt man eine "submitHandler" -Funktion hinzu, wenn jQuery Unobtrusive Validation verwendet wird?

Unauffälligen Bibliothek wird befestigen Sie den validator auf alle Formen, so haben Sie zu ersetzen, die submitHandler diese Weise:

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

InformationsquelleAutor der Antwort petrhaus

Folgende Erkenntnisse von Interesse sein können, um den Unterschied zu verstehen zwischen :

submitHandler : wird Aufgerufen, wenn das Formular erfolgreich geprüft wurde, kurz bevor die server postback

invalidHandler : wird Aufgerufen, wenn die Validierung fehl und es wird keine post zurück

@DGreen die Lösung definitiv zu sein scheint, der beste Weg, um zu injizieren, Besondere Handhabung, wenn die Formular-Validierung schlägt fehl, und Sie müssen etwas tun, wie die Anzeige eines pop-up-Validierung Zusammenfassung (invalidHandler)

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

@PeteHaus Lösung ist der beste Weg, etwas zu tun, wenn Sie verhindern möchten, dass ein postback einer erfolgreich validierten form (submitHandler)

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

Allerdings war ich etwas besorgt über das, was Verhalten war ich überschreiben (oder nicht zu überschreiben), das durch Bindung an die .validate Methode wie diese - und warum ich hatte zu tun, jeder Weg anders. So ich habe in der Quelle. Ich empfehle jeder der will, zu verstehen, dieses Verfahren nicht mehr so zu - setzen in einigen der "alert" - Aussagen oder "debugger" Aussagen, und es ist ziemlich einfach zu Folgen entlang*

Sowieso, es stellt sich heraus, dass, wenn die jquery.validate.unobtrusive handler initialisiert jquery.validate plugin es so nicht in den parseElement() Methode durch die Abfrage von Optionen, erstellt von der validationInfo() Methode.

ValidationInfo() gibt die Optionen:

 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)
           },

Den onErrors() Methode in jquery.validate.unobtrusive ist verantwortlich für die dynamische Erstellung der Validierung Zusammenfassung für MVC. Wenn Sie nicht erstellen eine Validierung Zusammenfassung (mit @Html.ValidationSummary() muss übrigens innerhalb der FORM, Körper), dann ist diese Methode völlig inert und tut nichts, so brauchen Sie nicht zu kümmern.

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);
        });
    }
}

Wenn Sie wirklich wollen, können Sie die Bindung der jquery.validate.unobtrusive handler wie dieser - aber ich würde nicht die Mühe, mich

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

Wenn Sie sich Fragen, warum dies funktioniert,

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

und das funktioniert nicht,

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

weil submitHandler ist explicily aufgerufen, in jquery.validate wenn die Gültigkeitsprüfung durchgeführt wird. Damit ist es egal, an welchem Punkt es eingestellt ist.

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

aber die invalidHandler ist an ein Ereignis gebunden, während init() so, wenn Sie legen Sie es in Ihrem eigenen code es ist zu spät

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

Ein wenig den code schrittweise macht für eine viel Verständnis manchmal! Hoffe, das hilft

*Stellen Sie sicher, dass Sie nicht minifizierung in bundles aktiviert.

InformationsquelleAutor der Antwort Simon_Weaver

I basiert diese auf der original-Antwort, die für mich nicht funktioniert. Ich denke, die Dinge haben sich geändert in jQuery.

Als üblich, nehmen Sie diesen code und fügen Sie reichlich Fehler überprüfen 😀 ich benutze ähnlichen code, um zu verhindern, dass Doppel-sendet auf unsere Formen, und es funktioniert in IE8+ (mvc4 und 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;
    }
}

InformationsquelleAutor der Antwort Andrew Backer