La réponse de validation à distance de Parsley.js est toujours validée sur true après ParsleyUI.addError

Question

J'ai ce formulaire :

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

Et le scénario :

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

Le message d'erreur s'affiche correctement si l'utilisateur existe déjà, cependant le champ est toujours validé comme correct.

Faire cela était si simple dans la v1 de Parsley.js :/

Answer 1

J'ai apporté quelques modifications à votre html et js :

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

Ce n'est pas une bonne idée de définir submit comme nom de votre bouton.Vérifier cette réponse et cette réponse.

Dans votre javascript, ajoutez le addAsyncValidator à votre champ au lieu du formulaire.Quant à la réponse du validateur, elle doit renvoyer true de false.Si vous souhaitez que votre champ soit valide lorsque vous recevez un 200 réponse, alors vous devez utiliser

return xhr.status === 200

Si vous supposez que le champ est valide lorsque la réponse d'état est 404, alors vous devez utiliser :

return xhr.status === 404

Voici le code qui a fonctionné pour moi.Si vous utilisez une URL valide qui renvoie un 404 code d'état, l'erreur sera affichée et le formulaire ne sera pas validé.

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

Voir ce jsfiddle pour le code complet.Puisque vous devez effectuer une requête serveur, le formulaire ne sera jamais validé (à cause d'Access-Control-Allow-Origin).Cependant, si vous testez cela localement avec une requête valide, cela fonctionnera.