Jak dodać funkcję "submitHandler" podczas korzystania z jQuery Unfortroduive Validation?

Sprawdzam poprawność formularza przy użyciu nowych funkcji dyskretnego sprawdzania poprawności w ASP.NET MVC 3.Jak dodać funkcję "submitHandler" podczas korzystania z jQuery Unfortroduive Validation?

Tak więc nie ma kodu, który napisałem, aby skonfigurować walidację jQuery, aby rozpocząć sprawdzanie poprawności mojego formularza. Wszystko to można zrobić, ładując bibliotekę jQuery.validate.unobtrusive.js.

Niestety muszę walnąć w "jesteś pewien?" komunikat, gdy formularz jest ważny, ale przed przesłaniem. Z jQuery sprawdzania chcesz dodać handleSubmit opcji podczas inicjalizacji tak:

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

Ale nie trzeba do zainicjowania podczas korzystania z dyskretną bibliotekę.

Wszelkie pomysły, gdzie/w jaki sposób mogę dodać procedurę do przesyłania w takim przypadku?

Thx

Źródło

2011-01-20 WooWaaBob

ktoś: czy istnieje oficjalna dokumentacja na ten temat ze strony PC? –

Uwaga: 'handleSubmit()' jest wywoływane tylko wtedy, gdy wszystkie wartości formularzy są sprawdzane. Nie jest wywoływany, jeśli masz jakieś błędy. Jest idealny do zapytania o potwierdzenie takie jak ty (ponieważ wiesz, że wszystko jest w porządku), ale jeśli chcesz zachować szczególną ostrożność w przypadku błędów, musisz użyć 'invalidHandler' - patrz odpowiedź DGreen –

Zamiast czekać, aż zostanie już zainicjalizowany, możesz również zadzwonić ['jQuery.validator.setDefaults'] (https://jqueryvalidation.org/jQuery.validator.setDefaults/) bezpośrednio, a wszelkie późniejsze formularze będą korzystały z tych ustawień. Po prostu upewnij się, że działa przed załadowaniem DOM, a jQuery Validator automatycznie inicjuje formularze. – KyleMit

Dyskretne biblioteka będzie dołączyć walidator na wszystkich formach, więc trzeba wymienić submitHandler ten sposób:

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

Źródło

2011-01-21 22:22:51 petrhaus

Dzięki @petrhaus - łatwa prosta odpowiedź, która również zwiększyła moje zrozumienie jQuery. – WooWaaBob

Dla dynamicznie ładowanych formularzy (np. Dialog), musisz najpierw wywołać $ .validator.unobtrusive.parse ($ ("formularz")) lub $ ("formularz"). Dane zostaną zwrócone niezdefiniowane. – parliament

Sfrustrowana część o tym, że utknąłem próbując dowiedzieć się, co poszło nie tak, ponieważ jeśli submitHandler został ustawiony w tagach

Znalazłem to pytanie, patrząc na sposób ustawienia invalidHandler , w przeciwieństwie do submitHandler. Co ciekawe, nie można ustawić invalidHandler w taki sam sposób, gdy używa się dyskretnego sprawdzania poprawności.

Funkcja nie jest zwolniony, gdy zostanie wykryty nieprawidłowy forma:

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

Podejście to działa:

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

Wydaje się, że ze względu na sposób, że jquery.validate.unobtrusive .js skrypt inicjuje wtyczkę Validate oraz sposób, w jaki wtyczka wywołuje procedurę obsługi.

Źródło

2011-01-25 22:46:03 DGreen

Uwaga: podejście "bind" jest tutaj dosłownie dokładnie tak samo jak funkcja init jquery.validate, która pomaga –

, kto może pomóc wyjaśnić? nie wygląda to "oficjalnie", jak chcę zdefiniować submitHandler? – Elaine

Próbowałem wszystkie powyższe, aby obsłużyć 'invalidHandler' pojawiające się' alert', ale nie wyskakuje. I '$ (" formularz ") .danych (" validator ")' zwraca 'undefined'. – Shimmy

Wolę wstrzyknąć obsługi zdarzeń, tak że może on być związany z ... :)

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

ten sposób można wiążę się to wszędzie potrzebna ...

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

Źródło

2012-06-30 05:59:42 Tracker1

następujące ustalenia mogą być interesujące, aby zrozumieć różnicę między:

submitHandler: Wywoływana, gdy formularz jest weryfikowany powodzeniem - tuż przed odświeżenie strony serwera
invalidHandler: Called jeżeli walidacja kończy się niepowodzeniem i nie ma możliwości przesłania odpowiedzi na adres:

@ Rozwiązanie DGreen zdecydowanie wydaje się być najlepszym sposobem na wstrzyknięcie specjalnej obsługi w przypadku niepowodzenia sprawdzania formularza i trzeba zrobić coś takiego jak wyświetlacz pop-up podsumowanie walidacji (invalidHandler)

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

rozwiązanie @PeteHaus jest najlepszym sposobem, aby coś zrobić, jeśli chcemy zapobiec odświeżenie strony z powodzeniem formie zatwierdzonej (submitHandler)

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

jednak byłem nieco zaniepokojony tym, co zachowanie byłem przesłanianie (lub nie nadrzędne) poprzez wiązanie do sposobu jak ten .validate - i dlaczego musiałem zrobić każdy sposób odmienny. Sprawdziłem źródło. Gorąco polecam wszystkim, którzy chcą zrozumieć tę procedurę, robią to również - umieszczajcie w niektórych "ostrzeżeniach" oświadczenia lub "debugger" oświadczenia i jest to dość łatwe do śledzenia *

W każdym razie okazuje się, że po uruchomieniuhandler jquery.validate plugin robi to w metodzie parseElement(), pobierając opcje utworzone za pomocą metody validationInfo().

ValidationInfo() zwraca opcje tak:

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

Sposób jquery.validate.unobtrusiveonErrors() jest odpowiedzialny za dynamiczne tworzenie panelu Podsumowanie walidacji dla MVC. Jeśli nie tworzysz panelu podsumowania sprawdzania poprawności (z @Html.ValidationSummary(), który musi przypadkowo być zawarty w treści FORMULARZA), ta metoda jest całkowicie obojętna i nie robi nic, więc nie musisz się martwić.

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

Jeśli naprawdę chcesz, aby można rozpiąć z obsługi takiego jquery.validate.unobtrusive - ale nie przeszkadza sobie

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

Jeśli zastanawiasz się, dlaczego to działa

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

i to nie działa

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

to dlatego, że jest wyraźnie wywoływana wewnątrz jquery.validate podczas sprawdzania poprawności. Dlatego nie ma znaczenia, w jakim punkcie jest ustawiony.

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

ale invalidHandler jest związany ze zdarzeniem podczas init() jak to tak, jeśli ustawisz go w swoim własnym kodzie, że jest zbyt późno

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

Trochę stepping poprzez kod sprawia, że za dużo zrozumienia czasami! Mam nadzieję, że to pomoże

* Upewnij się, że nie masz włączonej minyfikacji w zestawach.

Źródło

2012-12-23 21:15:23

Ładne szczegółowe wyjaśnienie Simon szczególnie w porównaniu do mojej niejasnej odpowiedzi :) – DGreen

@DGreen moje odpowiedzi wydają się być proporcjonalne do ilości bólu i czasu, jaki sprawił mi problem - ale bez twojej odpowiedzi byłoby to o wiele dłużej do czasu Zorientowałem się! –

Próbowałem wszystkich powyższych, aby obsłużyć 'invalidHandler' pojawiające się' alert', ale nie wyskakuje. I '$ (" formularz ") .danych (" validator ")' zwraca 'undefined'. – Shimmy

Oparłem to na oryginalnej odpowiedzi, która nie zadziałała dla mnie. Sądzę, że rzeczy zmieniły się w jQuery.

Jak zwykle, weź ten kod i dodaj obfite sprawdzanie błędów: D Używam podobnego kodu, aby uniemożliwić podwójne wysyłanie w naszych formularzach, i to działa dobrze w IE8 + (jak z mvc4 i 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; 
    } 
}

Źródło

2013-07-14 13:15:32

Powiązane problemy

Jak dodać funkcję "submitHandler" podczas korzystania z jQuery Unfortroduive Validation?

Odpowiedz

Powiązane problemy