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

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

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" />

Innym (nieudokumentowanym) sposobem na to jest zadzwonienie:

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

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

Jeszcze inny (dynamiczny) sposób:

$("form").validate().settings.ignore = "*";

Aby go ponownie włączyć, po prostu przywracamy domyślną wartość:

$("form").validate().settings.ignore = ":hidden";

Źródło: https://github.com/jzaefferer/jquery-validation/issues/725#issuecomment-17601443

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

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.

(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)

$("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ę :)

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.

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ę.

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

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