Wtyczka jQuery Validation: wyłącz walidację dla określonych przycisków przesyłania

167

Mam formularz z wieloma polami, które sprawdzam (niektóre z dodanymi metodami do niestandardowej walidacji) z doskonałą wtyczką Jörn Zaeffere do walidacji jQuery. W jaki sposób można obejść walidację z określonymi kontrolami przesyłania (innymi słowy, zwalidować walidację z niektórymi danymi wejściowymi przesyłania, ale nie odpalić walidacji z innymi)? Byłoby to podobne do ValidationGroups ze standardowymi kontrolkami walidatora ASP.NET.

Moja sytuacja:

Jest z ASP.NET WebForms, ale możesz to zignorować, jeśli chcesz. Jednak używam walidacji bardziej jako „rekomendacji”: innymi słowy, kiedy formularz jest przesyłany, walidacja jest uruchamiana, ale zamiast wyświetlania komunikatu „wymagany”, „zalecenie” pokazuje, że mówi coś podobnego do „ty pominięto następujące pola… czy mimo wszystko chcesz kontynuować? ” W tym momencie w kontenerze błędów widoczny jest teraz kolejny przycisk przesyłania, który można nacisnąć, który zignoruje walidację i mimo wszystko wyśle. Jak obejść formularze .validate () dla tej kontrolki przycisku i nadal publikować?

Przykład Kup i sprzedaj dom pod adresem http://jquery.bassistance.de/validate/demo/multipart/ pozwala na to, aby przejść do poprzednich linków, ale robi to poprzez utworzenie własnych metod i dodanie ich do walidatora. Wolałbym nie tworzyć własnych metod powielających funkcjonalność już we wtyczce walidacyjnej.

Poniżej znajduje się skrócona wersja skryptu do natychmiastowego zastosowania, który mam w tej chwili:

var container = $("#<%= Form.ClientID %> div.validationSuggestion");

$('#<%= Form.ClientID %>').validate({          
    errorContainer: container,
    errorLabelContainer: $("ul",container),
    rules: {
        <%= YesNo.UniqueID %>: { required: true },
        <%= ShortText.UniqueID %>: { required: true } // etc.

    },
    messages: {
        <%= YesNo.UniqueID %>: 'A message.',
        <%= ShortText.UniqueID %>: 'Another message.' // etc.
    },
    highlight: function(element, errorClass) {
        $(element).addClass(errorClass);
        $(element.form).find("label[for=" + element.id + "]").addClass(errorClass);
        $(element.form).find("label[for=" + element.id + "]").removeClass("valid");
    },
    unhighlight: function(element, errorClass) {
        $(element).removeClass(errorClass);
        $(element.form).find("label[for=" + element.id + "]").removeClass(errorClass);
        $(element.form).find("label[for=" + element.id + "]").addClass("valid");
    },
    wrapper: 'li'
}); 
Przetrząsać
źródło
Również określić zwrot kluczowego na przycisku, tak że nie będzie poruszać się z dala technote.in/TechNote/Forums/AspnetReply.aspx?post_id=134

Odpowiedzi:

285

Możesz dodać klasę CSS canceldo przycisku przesyłania, aby pominąć sprawdzanie poprawności

na przykład

<input class="cancel" type="submit" value="Save" />

Zobacz dokumentację jQuery Validator dla tej funkcji tutaj: Pomijanie weryfikacji podczas przesyłania


EDYCJA :

Powyższa technika została wycofana i zastąpiona formnovalidateatrybutem.

<input formnovalidate="formnovalidate" type="submit" value="Save" />
plac Czerwony
źródło
1
Czy to działa z <input />? Dodałem class = "cancel" i nie działa. Używam MVC2 z MicrosoftMvcValidation. Dziękuję Ci.
VinnyG
4
@VinnyG - nieużywane MicrosoftMvcValidation (i nigdy nie będzie) - to nie to samo, co walidacja jQuery.
redsquare
1
czy można osiągnąć to samo zachowanie bez elementu wejściowego? tj. czy mogę w jakiś sposób wywołać (w udokumentowany sposób, odwrotnie do odpowiedzi lepe) złożenie formularza i jednocześnie pominąć walidację?
ivan
10
Uwaga: to nie działa, jeśli dynamicznie dodajesz anulowanie zajęć, tj $('input[type=submit]').addClass('cancel'). Zajęcia muszą być obecne podczas ładowania strony.
lolesque
@lolesque prawdopodobnie musisz ponownie wywołać metodę walidacji, chyba że zmienili sposób, w jaki działa, zanotuj datę w tej odpowiedzi)
redsquare
107

Innym (nieudokumentowanym) sposobem na to jest zadzwonienie:

$("form").validate().cancelSubmit = true;

na zdarzenie kliknięcia przycisku (na przykład).

lepe
źródło
Witaj @lepe, wiesz, jak ponownie zastosować walidację jquery po napisaniu $("form").validate().cancelSubmit = true;. Próbowałem $("form").validate().cancelSubmit = false;i wzywam $("form").validate();do przesłania mojego przycisku przesyłania. Dzięki
Jaikrat
3
Można to zrobić na przykład $(yourForm).data('validator').cancelSubmit = false;dzięki
Jaikrat
16

Dodaj atrybut formnovalidate do danych wejściowych

    <input type="submit" name="go" value="Submit"> 
    <input type="submit" formnovalidate name="cancel" value="Cancel"> 

Dodawanie class = "cancel" jest teraz przestarzałe

Zobacz dokumentację Pomijanie weryfikacji po przesłaniu za pomocą tego linku

TastyCode
źródło
10

Możesz użyć opcji onsubmit: false (patrz dokumentacja ) podczas podłączania walidacji, która nie zostanie zweryfikowana po przesłaniu formularza. A następnie w swoim asp: button dodaj OnClientClick = $ ('# aspnetForm'). Valid (); wyraźnie sprawdzić, czy formularz jest ważny.

Możesz nazwać to modelem opt-in zamiast opisanego powyżej.

Uwaga: używam również walidacji jQuery z ASP.NET WebForms. Jest kilka problemów do poruszania się, ale kiedy już je przejdziesz, wrażenia użytkownika są bardzo dobre.

BrokeMyLegBiking
źródło
3

(Przedłużenie @lepei @redsquareodpowiedź na ASP.NET MVC+ jquery.validate.unobtrusive.js)


Jquery sprawdzania poprawności plugin (nie Microsoft dyskretny jeden) pozwala umieścić .cancelklasę na przycisk Prześlij do zatwierdzenia obejścia całkowicie (jak pokazano w akceptowanej odpowiedzi).

 To skip validation while still using a submit-button, add a class="cancel" to that input.

  <input type="submit" name="submit" value="Submit"/>
  <input type="submit" class="cancel" name="cancel" value="Cancel"/>

(nie myl tego z type='reset'czymś zupełnie innym)

Niestety, jquery.validation.unobtrusive.jskod obsługi walidacji (ASP.NET MVC) nieco psuje domyślne zachowanie wtyczki jquery.validate .

Oto, co wymyśliłem, aby umożliwić Ci umieszczenie .cancelprzycisku przesyłania, jak pokazano powyżej. Jeśli Microsoft kiedykolwiek to naprawi, możesz po prostu usunąć ten kod.

    // restore behavior of .cancel from jquery validate to allow submit button 
    // to automatically bypass all jquery validation
    $(document).on('click', 'input[type=image].cancel,input[type=submit].cancel', function (evt)
    {
        // find parent form, cancel validation and submit it
        // cancelSubmit just prevents jQuery validation from kicking in
        $(this).closest('form').data("validator").cancelSubmit = true;
        $(this).closest('form').submit();
        return false;
    });

Uwaga: jeśli przy pierwszej próbie okaże się, że to nie działa - upewnij się, że nie przechodzisz do serwera i nie widzisz strony wygenerowanej przez serwer z błędami. Będziesz musiał ominąć walidację po stronie serwera w inny sposób - pozwala to tylko na przesłanie formularza po stronie klienta bez błędów (alternatywą byłoby dodanie .ignoreatrybutów do wszystkiego w formularzu).

(Uwaga: może być konieczne dodanie buttondo selektora, jeśli używasz przycisków do przesyłania)

Simon_Weaver
źródło
to 4 godziny Pay with PayPal
kręcenia się
To nie zadziałało dla mnie z domyślnym szablonem MVC 5. Mam pakiety Nuget JQuery 1.10.2, JQuery Validation 1.11.1, Microsoft jQuery Unobtrusive Validation 3.0.0. U mnie zadziałało zastąpienie dwóch wierszy w kodzie przez: $(this).closest('form').data("validator", null).unbind().submit();To ustawi walidator na wartość null i rozwiąże go. Następnie prześle formularz. Możesz zresetować walidację w tym wierszu:$.validator.unobtrusive.parse($("#YourUniqueFormId"));
Ralph Jansen,
gdzieś po drodze zostało to naprawione. Udało mi się to całkowicie skomentować i działa teraz z .cancelklasą. uwaga: jeśli używasz przycisku przesyłania type = 'image', .cancelklasa nie będzie działać, chyba że zmienisz ":submit"na ":submit,:image"w oryginalnej wtyczce do walidacji jquery
Simon_Weaver
2
$("form").validate().settings.ignore = "*";

Lub

$("form").validate().cancelSubmit = true;

Ale bez powodzenia w niestandardowym wymaganym walidatorze. Aby wywołać przesyłanie dynamicznie, utworzyłem fałszywy ukryty przycisk przesyłania z tym kodem:

var btn = form.children('input.cancel.fakeSubmitFormButton');
if (btn.length === 0) {
    btn = $('<input name="FakeCancelSubmitButton" class="cancel fakeSubmitFormButton hide" type="submit" formnovalidate value="FakeCancelSubmitButton" />');
    form.append(btn);
}
btn.click();

Teraz pomiń poprawnie weryfikację :)

Davide Ciarmiello
źródło
W przypadku, gdy chcesz po prostu wykluczyć określoną klasę z walidacji, możesz użyć tego zamiast gwiazdki. $("form").validate().settings.ignore = "class-name";
James Poulose
1

To pytanie jest stare, ale znalazłem inny sposób na jego obejście, to użycie $('#formId')[0].submit(), które pobiera element dom zamiast obiektu jQuery, omijając w ten sposób wszelkie zaczepy walidacyjne. Ten przycisk przesyła formularz nadrzędny, który zawiera dane wejściowe.

<input type='button' value='SubmitWithoutValidation' onclick='$(this).closest('form')[0].submit()'/>

Upewnij się również, że nie masz żadnego inputo nazwie „submit”, w przeciwnym razie nadpisuje on funkcję o nazwie submit.

bradlis7
źródło
1

Odkryłem, że najbardziej elastycznym sposobem jest użycie JQuery:

event.preventDefault():

Np. Jeśli zamiast przesyłać chcę przekierować, mogę:

$("#redirectButton").click(function( event ) {
    event.preventDefault();
    window.location.href='http://www.skip-submit.com';
});

lub mogę wysłać dane do innego punktu końcowego (np. jeśli chcę zmienić akcję):

$("#saveButton").click(function( event ) {
    event.preventDefault();
    var postData = $('#myForm').serialize();
    var jqxhr = $.post('http://www.another-end-point.com', postData ,function() {
    }).done(function() {
        alert("Data sent!");
    }).fail(function(jqXHR, textStatus, errorThrown) {
        alert("Ooops, we have an error");
    })

Po wykonaniu „event.preventDefault ();” pomijasz walidację.

Scott Mayers
źródło
1

Mam dwa przyciski do przesyłania formularza, przycisk o nazwie zapisz i wyjdź omija walidację:

$('.save_exist').on('click', function (event) {
            $('#MyformID').removeData('validator');
            $('.form-control').removeClass('error');
            $('.form-control').removeClass('required');                
            $("#loanApplication").validate().cancelSubmit = true;
            $('#loanApplication').submit();
            event.preventDefault();
});
Bugfixer
źródło
0

Oto najprostsza wersja, mam nadzieję, że komuś pomoże,

$('#cancel-button').click(function() {
    var $form = $(this).closest('form');
    $form.find('*[data-validation]').attr('data-validation', null);
    $form.get(0).submit();
});
Lucy
źródło