لا تزال استجابة التحقق من صحة Parsley.js عن بعد يتم التحقق من صحتها بعد ParsleyUI.addError
-
21-12-2019 - |
سؤال
لدي هذا النموذج:
<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:/
المحلول
لقد قمت بإجراء بعض التغييرات على 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).ومع ذلك، إذا قمت باختبار هذا محليًا باستخدام طلب صالح، فسوف يعمل.