لا تزال استجابة التحقق من صحة 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);

يتم عرض رسالة الخطأ بشكل صحيح إذا كان المستخدم موجودًا بالفعل، ولكن لا يزال يتم التحقق من صحة الحقل على أنه صحيح.

كان القيام بذلك أمرًا سهلاً للغاية في الإصدار الأول من 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 للحصول على الكود الكامل.نظرًا لأنه يتعين عليك تنفيذ طلب خادم، فلن يتم التحقق من صحة النموذج أبدًا (بسبب Access-Control-Allow-Origin).ومع ذلك، إذا قمت باختبار هذا محليًا باستخدام طلب صالح، فسوف يعمل.