La risposta di validazione remota di prezzemolo.js è ancora true dopo Printeyui.adderror

Question

Ho questa forma:

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

.

e script:

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

.

Il messaggio di errore viene visualizzato correttamente se esiste già l'utente, tuttavia il campo è ancora convalidato come corretto.

Fare questo è stato così facile in v1 di prezzemolo.js: /

Answer 1

Ho apportato alcune modifiche al tuo HTML e 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>

.

Non è una buona idea impostare submit come nome del pulsante. Check Questa risposta e Questa risposta .

Nel tuo JavaScript, aggiungi il addAsyncValidator al tuo campo anziché il modulo. Per quanto riguarda la risposta del validatore, deve restituire true of false. Se si desidera che il campo sia valido quando si ottiene una risposta 200, è necessario utilizzare

return xhr.status === 200

.

Se si presuppone che il campo sia valido quando la risposta di stato è 404, è necessario utilizzare:

return xhr.status === 404

.

Ecco il codice che ha funzionato per me. Se si utilizza un URL valido che restituisce un codice di stato 404, verrà visualizzato l'errore e il modulo non verrà convalidato.

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

.

Vedi questo jsfiddle per il codice completo. Poiché è necessario eseguire una richiesta di server, il modulo non verrà mai convalidato (a causa dell'accesso-controllo-consentito-origine). Tuttavia, se lo prova localmente con una richiesta valida, funzionerà.