Die Remote-Validierungsantwort von Parsley.j wird nach ParsleyUI.addError weiterhin auf „true“ validiert

Question

Ich habe dieses Formular:

<form method="post" id="myForm" data-parsley-validate>
<input type="text" name="firstName" id="firstName" required>
<input type="text" name="lastName" id="lastName" required>
<input type="text" name="userName" id="userName" 
            data-parsley-trigger="focusout" 
            data-parsley-remote
            data-parsley-remote-options='{ "type": "POST" }'
            data-parsley-remote-validator='validateName'
            required>
<input type="button" id="formSave" name="submit" value="Next">
</form>

Und Drehbuch:

var userName = $('#userName').parsley();
var _xsrf = $("[name='_xsrf']").val();
$('#myForm').parsley()
    .addAsyncValidator('validateName', function(xhr) {
        window.ParsleyUI.removeError(userName, 'name-exists');
        if (xhr.status == '404') {
            window.ParsleyUI.addError(userName, 'name-exists', "Name already exists.");
            return 404;
        } else if (xhr.status == '200') {
            return 200;
        }
    }, '/validate/?country=' + country + '&_xsrf=' + _xsrf);

Die Fehlermeldung wird korrekt angezeigt, wenn der Benutzer bereits vorhanden ist, das Feld jedoch weiterhin als korrekt validiert wird.

Dies war in Version 1 von Parsley.js so einfach:/

Answer 1

Ich habe einige Änderungen an Ihrem HTML und JS vorgenommen:

<form method="post" id="myForm">
    <input type="text" name="_xsrf" id="_xsrf" value="test">
    <input type="text" name="userName" id="userName" 
            data-parsley-trigger="focusout"
            data-parsley-remote
            data-parsley-remote-options='{ "type": "POST" }'
            data-parsley-remote-validator="validateName"
            data-parsley-remote-message="Name already exists."
            required>
    <!--<input type="button" id="formSave" name="submit" value="Next">-->
    <input type="submit" id="formSave" name="formSave" value="Next">
</form>

Es ist keine gute Idee, das einzustellen submit als Name Ihrer Schaltfläche.Überprüfen diese Antwort Und diese Antwort.

Hängen Sie in Ihrem Javascript das an addAsyncValidator zu Ihrem Feld anstelle des Formulars.Die Antwort des Validators muss zurückgegeben werden true von false.Wenn Sie möchten, dass Ihr Feld gültig ist, wenn Sie eine erhalten 200 Antwort, dann müssen Sie verwenden

return xhr.status === 200

Wenn Sie davon ausgehen, dass das Feld gültig ist, wenn die Statusantwort lautet 404, dann sollten Sie Folgendes verwenden:

return xhr.status === 404

Hier ist der Code, der bei mir funktioniert hat.Wenn Sie eine gültige URL verwenden, die a zurückgibt 404 Wenn Sie den Statuscode eingeben, wird der Fehler angezeigt und das Formular wird nicht validiert.

var _xsrf = $("#_xsrf").val();
var userName = $("#userName").parsley()
    .addAsyncValidator('validateName', function (xhr) {
         return xhr.status === 200;
    }, 'http://localhost/parsley/CheckEmailAvailability.php?_xsrf=' + _xsrf);

$( "#myForm" ).parsley();

$("#myForm" ).submit(function( event ) {
    $(this).parsley("validate");
    if ($(this).parsley("isValid")) {
        console.log('valid');
    }
    event.preventDefault();
});

Sehen diese jsfiddle für den vollständigen Code.Da Sie eine Serveranfrage durchführen müssen, wird das Formular nie validiert (aufgrund von Access-Control-Allow-Origin).Wenn Sie dies jedoch lokal mit einer gültigen Anfrage testen, funktioniert es.