Wtyczka sprawdzania poprawności jQuery: wyłącza sprawdzanie poprawności dla określonych przycisków przesyłania

Question

Mam formularz z wieloma polami, które sprawdzam (niektóre z metodami dodanymi do niestandardowej weryfikacji) za pomocą doskonałej wtyczki jQuery Validation firmy Jörn Zaeffere. W jaki sposób obchodzisz sprawdzanie poprawności z określonymi kontrolkami przesyłania (innymi słowy, sprawdzanie poprawności przeciwpożarowej z niektórymi danymi wejściowymi, ale nie sprawdzaj poprawności z innymi)? Byłoby to podobne do ValidationGroups ze standardowymi kontrolkami ASP.NET.

Moja sytuacja:

To z ASP.NET WebForms, ale można zignorować, jeśli chcesz. Jednak używam walidacji bardziej jako "zalecenia": innymi słowy, kiedy formularz jest wysyłany, sprawdzanie poprawności jest uruchamiane, ale zamiast "wymaganego" wyświetlania komunikatu, "zalecenie" pokazuje, że mówi coś wzdłuż linii "ty". ominęły następujące pola .... czy chcesz kontynuować mimo to? " W tym momencie w pojemniku błędu jest teraz widoczny inny przycisk do przesłania, który zignorowałby zatwierdzenie i mimo to przesłał go. Jak obejść formularze .validate() dla tej kontrolki przycisku i nadal pisać?

Próbka Kup i Sprzedaj dom pod numerem http://jquery.bassistance.de/validate/demo/multipart/ pozwala na to, aby trafić w poprzednie łącza, ale robi to poprzez tworzenie niestandardowych metod i dodawanie ich do walidatora. Wolałbym nie tworzyć niestandardowych metod powielania funkcjonalności już w dodatku do sprawdzania poprawności.

Poniżej znajduje się skrócona wersja natychmiast obowiązującym skrypt, który mam teraz:

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

Answer 1

Możesz dodać klasę CSS cancel na przycisk Prześlij do powstrzymania walidacji

np

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

znaleźć w dokumentacji jQuery Validator tej funkcji tutaj: Skipping validation on submit

---

EDIT:

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

<input formnovalidate="formnovalidate" type="submit" value="Save" /> 

Answer 2

Można użyć onSubmit false opcję (patrz documentation) przy podłączaniu się walidacji, który nie potwierdzi na złożenie formularza. A następnie w swoim asp: button dodaj OnClientClick = $ ('# aspnetForm'). Valid(); aby wyraźnie sprawdzić, czy formularz jest prawidłowy.

Można nazwać ten model zgody, zamiast opcji rezygnacji opisanej powyżej.

Uwaga, używam również sprawdzania poprawności jquery za pomocą formularzy sieci Web ASP.NET. Jest kilka kwestii do poruszania się, ale gdy je przejdziesz, doświadczenie użytkownika jest bardzo dobre.

Answer 3

Inne (nieudokumentowane) sposób to zrobić, to zadzwonić:

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

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

Answer 4

(Rozszerzenie @lepe „s oraz @redsquare odpowiedź na ASP.NET MVC + jquery.validate.unobtrusive.js)

---

jquery validation plugin (nie Microsoft dyskretny jeden) pozwala umieścić klasę .cancel na przycisk Prześlij, aby pominąć sprawdzanie całkowicie (jak pokazano w zaakceptowanej 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 mylić z type='reset' która jest czymś zupełnie innym)

Niestety walidacja jquery.validation.unobtrusive.js magazynowe (ASP.NET MVC) kod kinda śruby up jquery.validate plugin's default behavior.

Oto, co wymyśliłem, aby umożliwić umieszczenie .cancel na przycisku 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 okazuje się, że to nie działa - upewnij się, że nie jesteś roundtripping do serwera i widząc stronę serwera generowane z błędami. Będziesz musiał pominąć sprawdzanie poprawności po stronie serwera w inny sposób - to po prostu pozwala na przesłanie formularza po stronie klienta bez błędów (alternatywą byłoby dodanie atrybutów .ignore do wszystkiego w formularzu).

(Uwaga: Być może trzeba dodać button do selektora jeśli używasz przycisków do składania)

Answer 5

to pytanie jest stary, ale znalazłem inny sposób wokół to jest użycie $('#formId')[0].submit(), który dostaje DOM element zamiast obiektu jQuery, omijając wszelkie haki sprawdzania poprawności. Ten przycisk przesyła formularz nadrzędny zawierający dane wejściowe.

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

Ponadto, upewnij się, że nie mają żadnych input „s nazwanych«submit», albo zastępuje funkcję o nazwie submit.

Answer 6

Dodaj atrybut formnovalidate do wejścia

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

Dodawanie class = "cancel" jest już nieaktualnych

Zobacz docs Pomijanie walidacji na złożenie wniosku na tym link

Answer 7

Yet innego (dynamiczny) sposób:

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

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

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

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

Answer 8

okazało się, że najbardziej elastyczny sposób to zrobić użycie jQuery:

event.preventDefault(): 

Npjeśli zamiast składania Chcę przekierować, mogę zrobić:

$("#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ć działanie):

$("#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 do 'event.preventDefault();' omijasz sprawdzanie poprawności.

Answer 9

Mam dwie przycisku składania formularza, przycisk o nazwie Save and exit omija sprawdzanie:

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

Answer 10

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

Albo

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

ale bez powodzenia w niestandardowym wymagane walidator. Dla Call a przedstawienia dynamicznie, i stworzyli fałszywe ukryty przycisk submit 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 pominąć sprawdzanie poprawnie :)