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

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

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

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

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

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

Noch ein (dynamischer) Weg:

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

Und um es wieder zu aktivieren, setzen wir einfach den Standardwert zurück:

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

Quelle: https://github.com/jzaefferer/jquery-validation/issues/725#issuecomment-17601443

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

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.

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

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

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.

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.

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

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