Die Remote-Validierungsantwort von Parsley.j wird nach ParsleyUI.addError weiterhin auf „true“ validiert
-
21-12-2019 - |
Frage
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:/
Lösung
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.