jQuery Validation Plugin: Deaktivieren Sie die Validierung für bestimmte Submit-Schaltflächen

167

Ich habe ein Formular mit mehreren Feldern, das ich mit dem hervorragenden jQuery Validation-Plugin von Jörn Zaeffere validiere (einige mit Methoden zur benutzerdefinierten Validierung). Wie umgehen Sie die Validierung mit bestimmten Submit-Steuerelementen (mit anderen Worten, Brandvalidierung mit einigen Submit-Eingaben, aber keine Brandvalidierung mit anderen)? Dies ähnelt ValidationGroups mit Standard-ASP.NET-Validator-Steuerelementen.

Meine Situation:

Es ist mit ASP.NET WebForms, aber Sie können das ignorieren, wenn Sie möchten. Ich verwende die Validierung jedoch eher als "Empfehlung": Mit anderen Worten, wenn das Formular gesendet wird, wird die Validierung ausgelöst, aber anstelle einer "erforderlichen" Meldung wird eine "Empfehlung" angezeigt, die etwas in der Richtung von "Sie" sagt habe die folgenden Felder verpasst ... möchtest du trotzdem fortfahren? " An diesem Punkt im Fehlercontainer ist jetzt eine weitere Schaltfläche zum Senden sichtbar, die gedrückt werden kann, wodurch die Validierung ignoriert und trotzdem gesendet wird. Wie kann man die Formulare .validate () für diese Schaltflächensteuerung umgehen und trotzdem posten?

Das Beispiel "Haus kaufen und verkaufen" unter http://jquery.bassistance.de/validate/demo/multipart/ ermöglicht dies, um auf die vorherigen Links zuzugreifen. Dies geschieht jedoch durch Erstellen benutzerdefinierter Methoden und Hinzufügen zum Validator. Ich würde es vorziehen, keine benutzerdefinierten Methoden erstellen zu müssen, die bereits im Validierungs-Plugin Funktionen duplizieren.

Das Folgende ist eine verkürzte Version des sofort anwendbaren Skripts, das ich gerade habe:

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

Antworten:

285

Sie können canceleiner Senden-Schaltfläche eine CSS-Klasse hinzufügen , um die Validierung zu unterdrücken

z.B

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

Die jQuery Validator-Dokumentation dieser Funktion finden Sie hier: Überspringen der Validierung beim Senden


EDIT :

Die obige Technik wurde veraltet und durch das formnovalidateAttribut ersetzt.

<input formnovalidate="formnovalidate" type="submit" value="Save" />
rotes Quadrat
quelle
1
Funktioniert es mit <input />? Ich habe class = "cancel" hinzugefügt und es funktioniert nicht. Ich verwende MVC2 mit MicrosoftMvcValidation. Danke dir.
VinnyG
4
@VinnyG - nicht verwendet MicrosoftMvcValidation (und würde nie) - dies ist nicht dasselbe wie jquery validate.
Redsquare
1
Ist es möglich, dasselbe Verhalten ohne das Eingabeelement zu erreichen? dh kann ich irgendwie (auf dokumentierte Weise, im Gegensatz zu Lepes Antwort) das Senden von Formularen auslösen und gleichzeitig die Validierung überspringen?
Ivan
10
Hinweis: Dies funktioniert nicht, wenn Sie den Klassenabbruch dynamisch hinzufügen, dh $('input[type=submit]').addClass('cancel')die Klasse muss beim Laden der Seite vorhanden sein.
Lolesque
@lolesque Sie müssen die Validierungsmethode wahrscheinlich erneut aufrufen, es sei denn, sie hat die Funktionsweise geändert. Notieren Sie sich das Datum in dieser Antwort.)
redsquare
107

Eine andere (undokumentierte) Möglichkeit, dies zu tun, besteht darin, Folgendes anzurufen:

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

auf das Klickereignis der Schaltfläche (zum Beispiel).

Lepe
quelle
Hallo @lepe, Sie wissen, wie Sie die jquery-Validierung nach dem Schreiben erneut anwenden können $("form").validate().cancelSubmit = true;. Ich habe versucht $("form").validate().cancelSubmit = false;, $("form").validate();beim Senden meinen Senden-Button aufzurufen . Danke
Jaikrat
3
Es kann wie $(yourForm).data('validator').cancelSubmit = false;Danke gemacht werden
Jaikrat
16

Fügen Sie der Eingabe das Attribut formnovalidate hinzu

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

Das Hinzufügen von class = "cancel" ist jetzt veraltet

Informationen zum Überspringen der Validierung beim Senden unter diesem Link finden Sie in den Dokumenten

TastyCode
quelle
10

Sie können die Option onsubmit: false (siehe Dokumentation ) verwenden, wenn Sie die Validierung verkabeln, die beim Absenden des Formulars nicht validiert wird. Und dann fügen Sie in Ihrer asp: -Button einen OnClientClick = $ ('# aspnetForm') hinzu. Valid (); um explizit zu überprüfen, ob das Formular gültig ist.

Sie können dies als Opt-In-Modell anstelle des oben beschriebenen Opt-Out-Modells bezeichnen.

Beachten Sie, dass ich auch die jquery-Validierung mit ASP.NET WebForms verwende. Es gibt einige Probleme beim Navigieren, aber sobald Sie sie überwunden haben, ist die Benutzererfahrung sehr gut.

BrokeMyLegBiking
quelle
3

(Erweiterung von @lepe's und @redsquareAntwort für ASP.NET MVC+ jquery.validate.unobtrusive.js)


Mit dem jquery-Validierungs-Plugin (nicht dem unauffälligen von Microsoft) können Sie eine .cancelKlasse auf Ihre Senden-Schaltfläche setzen, um die Validierung vollständig zu umgehen (wie in der akzeptierten Antwort gezeigt).

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

(Verwechseln Sie dies nicht mit type='reset'etwas völlig anderem)

Leider vermasselt derjquery.validation.unobtrusive.js Code für die Validierungsbehandlung (ASP.NET MVC) das Standardverhalten des Plugins jquery.validate .

Dies ist, was ich mir ausgedacht habe, damit Sie .cancelwie oben gezeigt auf die Schaltfläche "Senden" klicken können. Wenn Microsoft dies jemals "behebt", können Sie diesen Code einfach entfernen.

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

Hinweis: Wenn es auf den ersten Blick so aussieht, als ob dies nicht funktioniert, stellen Sie sicher, dass Sie nicht zum Server wechseln und eine vom Server generierte Seite mit Fehlern sehen. Sie müssen die Validierung auf der Serverseite auf andere Weise umgehen. Dadurch kann das Formular nur ohne Fehler clientseitig gesendet werden (die Alternative besteht darin, allen .ignoreElementen in Ihrem Formular Attribute hinzuzufügen ).

(Hinweis: Möglicherweise müssen Sie buttonder Auswahl hinzufügen , wenn Sie zum Senden Schaltflächen verwenden.)

Simon_Weaver
quelle
Das sind 4 Stunden für einen verdammten Pay with PayPal
Submit-
Dies funktionierte bei mir mit der Standard-MVC 5-Vorlage nicht. Ich habe Nuget-Pakete JQuery 1.10.2, JQuery Validation 1.11.1, Microsoft jQuery Unobtrusive Validation 3.0.0. Was für mich funktioniert hat, ist das Ersetzen der beiden Zeilen in Ihrem Code durch: $(this).closest('form').data("validator", null).unbind().submit();Dadurch wird der Validator auf null gesetzt und die Bindung aufgehoben. Danach wird das Formular gesendet. Sie können die Validierung durch diese Zeile zurücksetzen:$.validator.unobtrusive.parse($("#YourUniqueFormId"));
Ralph Jansen
Irgendwo entlang der Linie wurde dies behoben. Ich konnte dies komplett auskommentieren und es funktioniert jetzt mit einem.cancel Klasse. Anmerkung: Wenn Sie eine Art verwenden = ‚Bild‘ Submit - Button dann die .cancelKlasse wird nicht funktionieren , es sei denn , Sie zu ändern , ":submit"um ":submit,:image"in dem Plugin - jquery Original Validierung
Simon_Weaver
2
$("form").validate().settings.ignore = "*";

Oder

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

Aber ohne Erfolg in einem benutzerdefinierten erforderlichen Validator. Um einen Submit dynamisch aufzurufen, habe ich eine gefälschte versteckte Submit-Schaltfläche mit diesem Code erstellt:

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

Überspringen Sie nun die Validierung korrekt :)

Davide Ciarmiello
quelle
Wenn Sie nur eine bestimmte Klasse von der Validierung ausschließen möchten, können Sie diese anstelle eines Sternchens verwenden. $("form").validate().settings.ignore = "class-name";
James Poulose
1

Diese Frage ist alt, aber ich habe einen anderen Weg gefunden, sie zu verwenden $('#formId')[0].submit(): Das dom-Element wird anstelle des jQuery-Objekts abgerufen, wodurch alle Validierungs-Hooks umgangen werden. Diese Schaltfläche sendet das übergeordnete Formular, das die Eingabe enthält.

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

Stellen Sie außerdem sicher, dass Sie keinen inputNamen mit dem Namen "submit" haben oder die benannte Funktion überschreibt submit.

bradlis7
quelle
1

Ich fand, dass der flexibelste Weg darin besteht, JQuery's zu verwenden:

event.preventDefault():

Wenn ich beispielsweise nicht senden möchte, sondern umleiten möchte, kann ich Folgendes tun:

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

oder ich kann die Daten an einen anderen Endpunkt senden (z. B. wenn ich die Aktion ändern möchte):

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

Sobald Sie 'event.preventDefault ();' Sie umgehen die Validierung.

Scott Mayers
quelle
1

Ich habe zwei Schaltflächen zum Senden von Formularen. Die Schaltfläche zum Speichern und Beenden umgeht die Validierung:

$('.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
quelle
0

Hier ist die einfachste Version, hoffe es hilft jemandem,

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