Parsley.js 원격 검증 응답 여전히 유효성을 검사하는 진정한 후 ParsleyUI.addError

Question

내가 이 양식은:

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

고 스크립트:

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

오류 메시지가 올바르게 표시되는 경우 사용자가 이미 존재하는,그러나 현장은 여전히 유효성으로 정확하다.

이렇게 너무 쉽게 v1 의 Parsley.js :/

Answer 1

나는 어떤 변화를 html 및 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>

그것은 좋은 아이디어 설정 submit 의 이름으로 귀하의 단추입니다.체크 이 답변 고 이 답변.

자바스크립트에서 추가 addAsyncValidator 귀하의 필드 대의 형태입니다.으로 검증 응답이 돌아 true 의 false.당신이 당신의 분야가 유효할 때 얻 200 응답,다음 사용해야 합니다

return xhr.status === 200

가정할 경우에는 분야가 유효한 상태 응답이 404, 다음을 사용해야 한다:

return xhr.status === 404

여기에는 코드는 나를 위해 일했습니다.당신이 사용하는 경우 유효한 URL 을 반환하는 404 상태 코드에 오류가 표시됩니다 그리고 형태 확인이 불가능했습니다.

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

보 이 jsfiddle 대체 코드입니다.기 때문이 있을 수행하는 서버의 요청을 양식이 되지 않 검증(으로 인해 액세스 제어-Allow-Origin).그러나,당신은 테스트를 로컬로 유효한 요청,그것은 작동합니다.