Die jquery-Validierung wartet nicht darauf, dass die Remote-Validierung true zurückgibt, betrachtet die Form als gültig

Als jQuery-Validate-1.11.1 (und vielleicht auch ältere), die akzeptierte Antwort funktioniert nicht. Darüber hinaus gibt es keine einfache Antwort auf diese Frage, und die Lösung erfordert das hinzufügen einer benutzerdefinierte Gültigkeitsprüfung-Methode von jQuery Validierung.

Eigentlich die einfache Antwort kann nur sein: Don ' T call valid() manuell, wenn alles, was Sie tun möchten, ist das Formular abschicken. Lass das Validate plugin es für Sie tun. Intern, wird es warten, bis alle asynchronen Anfragen, um abzuschließen, bevor das Formular eingereicht werden. Dieses Problem tritt nur, wenn Sie manuell prüfen valid() oder element().

Jedoch, es gibt viele Gründe, warum Sie möglicherweise tun müssen. Zum Beispiel, die Seite, die ich arbeite, muss zur überprüfung der Gültigkeit eines Feldes mit einem remote-validator aktivieren, bevor Sie den rest des Formulars. Ich könnte einfach tun, es mit der hand statt mit jQuery Validierung, aber das ist eine Duplizierung der Anstrengungen.

Also, warum die Einstellung async: false nicht funktionieren? Wenn Sie async auf false, wird die Anfrage wird gemacht werden synchron, aber das plugin funktioniert nicht mit dieser richtig. Die interne remote Funktion gibt immer "pending" die Ursache der valid() Funktion zurück true auch wenn die Anfrage bereits abgeschlossen und erhielt eine falsche Antwort! Es überprüft nicht den Wert der response-oder zeigen die Fehler erst später.

Die Lösung zu machen valid() und element() Verhalten sich synchron, wenn mit einem synchronen callback hinzufügen, um eine benutzerdefinierte Validierung der Methode. Ich habe versucht, diese selbst, und es scheint gut zu funktionieren. Sie können kopieren Sie einfach den Quellcode aus dem regulären remote-Validierung und ändern Sie es zu behandeln synchrone ajax-Aufrufe, und werden synchron standardmäßig.

Den source-code der remote-Funktion in v1.11.1 auf der Zeile beginnt 1112 der jquery.validate.js:

remote: function( value, element, param ) {
    if ( this.optional(element) ) {
        return "dependency-mismatch";
    }

    var previous = this.previousValue(element);
    if (!this.settings.messages[element.name] ) {
        this.settings.messages[element.name] = {};
    }
    previous.originalMessage = this.settings.messages[element.name].remote;
    this.settings.messages[element.name].remote = previous.message;

    param = typeof param === "string" && {url:param} || param;

    if ( previous.old === value ) {
        return previous.valid;
    }

    previous.old = value;
    var validator = this;
    this.startRequest(element);
    var data = {};
    data[element.name] = value;
    $.ajax($.extend(true, {
        url: param,
        mode: "abort",
        port: "validate" + element.name,
        dataType: "json",
        data: data,
        success: function( response ) {
            validator.settings.messages[element.name].remote = previous.originalMessage;
            var valid = response === true || response === "true";
            if ( valid ) {
                var submitted = validator.formSubmitted;
                validator.prepareElement(element);
                validator.formSubmitted = submitted;
                validator.successList.push(element);
                delete validator.invalid[element.name];
                validator.showErrors();
            } else {
                var errors = {};
                var message = response || validator.defaultMessage( element, "remote" );
                errors[element.name] = previous.message = $.isFunction(message) ? message(value) : message;
                validator.invalid[element.name] = true;
                validator.showErrors(errors);
            }
            previous.valid = valid;
            validator.stopRequest(element, valid);
        }
    }, param));
    return "pending";
}

Merken, wie es immer gibt "pending" zurück, auch wenn der ajax-Aufruf abgeschlossen ist.

Um dieses Problem zu beheben, nehmen Sie die folgenden änderungen:

1. Bewegen Sie die Erklärung der valid variable außerhalb der ajax-call und die success-Funktion, um eine Schließung, und weisen Sie ihm einen Wert von "pending".
2. Ändern die alte Erklärung des valid Variablen eine Zuweisung.
3. Rückkehr der valid variable anstelle der Konstanten "pending".

Hier ist der komplette code für ein plugin, um das plugin. Nur speichern diese als js Datei und fügen ihn in Ihre Seite oder Vorlage, nach der include für jQuery Validierung:

//Created for jQuery Validation 1.11.1
$.validator.addMethod("synchronousRemote", function (value, element, param) {
    if (this.optional(element)) {
        return "dependency-mismatch";
    }

    var previous = this.previousValue(element);
    if (!this.settings.messages[element.name]) {
        this.settings.messages[element.name] = {};
    }
    previous.originalMessage = this.settings.messages[element.name].remote;
    this.settings.messages[element.name].remote = previous.message;

    param = typeof param === "string" && { url: param } || param;

    if (previous.old === value) {
        return previous.valid;
    }

    previous.old = value;
    var validator = this;
    this.startRequest(element);
    var data = {};
    data[element.name] = value;
    var valid = "pending";
    $.ajax($.extend(true, {
        url: param,
        async: false,
        mode: "abort",
        port: "validate" + element.name,
        dataType: "json",
        data: data,
        success: function (response) {
            validator.settings.messages[element.name].remote = previous.originalMessage;
            valid = response === true || response === "true";
            if (valid) {
                var submitted = validator.formSubmitted;
                validator.prepareElement(element);
                validator.formSubmitted = submitted;
                validator.successList.push(element);
                delete validator.invalid[element.name];
                validator.showErrors();
            } else {
                var errors = {};
                var message = response || validator.defaultMessage(element, "remote");
                errors[element.name] = previous.message = $.isFunction(message) ? message(value) : message;
                validator.invalid[element.name] = true;
                validator.showErrors(errors);
            }
            previous.valid = valid;
            validator.stopRequest(element, valid);
        }
    }, param));
    return valid;
}, "Please fix this field.");

Getestet hab ich dies mit meiner eigenen form und es funktioniert Super. Kann ich testen mein element für die Gültigkeit bevor der rest der form. Allerdings werden Sie wahrscheinlich wollen, zu setzen onkeyup: false um zu verhindern, dass die Durchführung einer synchronen Rückruf auf jede Taste zu drücken. Benutze ich auch gerne onfocusout: false.

Diesen zu nutzen, ersetzen Sie einfach "remote" in den validation-Einstellungen mit "synchronousRemote" überall, das Sie verwenden möchten. Zum Beispiel:

$("#someForm").validate({
    rules: {
        someField: {
            required: true,
            synchronousRemote: {
                    url: "/SomePath/ValidateSomeField"
                    //notice that async: false need not be specified. It's the default.
            }
        }
    },
    messages: {
        someField: {
            required: "SomeField is required.",
            synchronousRemote: "SomeField does not exist."
        }
    },
    onkeyup: false,
    onfocusout: false
});

InformationsquelleAutor der Antwort Glazed

Hier ist eine Lösung, mit der wir kam mit auf mein Projekt.

var validPendingTimeout;

function doSomethingWithValid() {
  var isValid = $("#form").valid();
  var isPending = $("#form").validate().pendingRequest !== 0;

  if (isPending) {
    if (typeof validPendingTimeout !== "undefined") {
      clearTimeout(validPendingTimeout);
    }
    validPendingTimeout = setTimeout(doSomethingWithValid, 200);
  }

  if (isValid && !isPending) {
    //do something when valid and not pending
  } else {
    //do something else when not valid or pending
  }
}

Dieser nutzt die Tatsache, dass $("#form").validate().pendingRequest immer > 0, wenn eine remote-Validierung.

Hinweis: dies funktioniert nicht mit der Einstellung async: true im remote-Anfrage.

InformationsquelleAutor der Antwort Paul B.

Musst du halt das normale abschicken der browser im Falle, dass die überprüfung den Wert false zurückgibt.

$("#new_component_form").submit(function() {
    if ($(this).valid())) {
        console.log("I'm a valid form!");
    } else {
        console.log("I'm NOT a valid form!");
        //Stop the normal submit of the browser
        return false;
    }
}

InformationsquelleAutor der Antwort ElHacker