欧芹异步定制验证

Question

我正在尝试对服务进行调用，以检查邮政编码是否有效...，如果无效，则显示欧芹错误“无效的邮政编码”。

我之前已经做过自定义欧芹验证，并且之前已经做过ajax请求，但是我不确定如何将两者结合起来以进行异步荷兰芹验证。

注意：验证是在“聚焦”上触发的，因此只需按Tab或单击以触发验证

所需行为：

如果输入的邮政编码与某个状态不相关。 它应该给出错误

有效邮递区号：222222 = VA

有效的邮政编码：444444 = OH

无效的邮政编码：111111 ='' //显示欧芹错误

当前行为：

无效的邮政编码：111111 ='' //不显示欧芹错误

相关的Stackoverflow问题，但无法通过以下方式找出解决方案：

我看了其他一些帖子，但仍然无法弄清楚：其他帖子：

1） 自定义Parsley.js异步验证程序循环两次

2） 如何从异步回调函数返回值？

有关代码的注释：

现在我只有一个在keyup上触发的函数： $('#Zipcode').keyup(function (){...这需要替换为window.Parsley.addAsyncValidator(...方法调用。

 //Only Allow Numbers document.querySelector('#Zipcode').addEventListener("input", function (event) { this.value = this.value.replace(/[^0-9]/g, "").substring(0, 5); }); $('#Zipcode').keyup(function () { var zipApiUrl = '//api.zippopotam.us/us/'; var zip_in = $(this); if ((zip_in.val().length === 5)) { // Make HTTP Request $.ajax({ url: zipApiUrl + zip_in.val(), cache: false, dataType: "json", type: "GET", success: function (result, success) { $('#zipState').val(result['places'][0]['state abbreviation']); }, error: function (result, success) { $('#zipState').val(''); } }); } }); //window.Parsley.addAsyncValidator('validZipcodeCheck', 

 form .parsley-error{ border: 2px solid #ba0000 !important; } form .parsley-errors-list{ margin-top: 0; margin-bottom: 0; color: red;} 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.7.2/parsley.js"></script> <form data-parsley-validate> <label for="Zipcode">ZIP CODE</label> <input type="tel" id="Zipcode" name="Zipcode" autocomplete="on" required="" data-parsley-required-message="Required" data-parsley-minlength="5" data-parsley-minlength-message="Invalid 5-Digit Zip" data-parsley-trigger="focusout" data-parsley-validZipcodeCheck="" data-parsley-validZipcodeCheck-message="Invalid Zipcode" /> <div> <label>State</label> <input disabled id="zipState" name="State" /> </div> <!--input type="submit" value="SUBMIT Zipcode" /--> <form> 

Answer 1

这有效...但是有令人不愉快的副作用...

主要是当我以这种方式执行操作时，我不再能够执行$('form').parsley().validate() -该操作以前返回true / false，现在始终返回null。 因此，要执行ajax提交，我必须创建一个侦听器

像这样：

window.Parsley.on('form:submit', function () { $.ajax(...) })

而不是我通常如何看待它：

$(leadFormEle).on('submit', function (ele) {
ele.preventDefault();
$(this).parsley().validate();
if ( $(this).parsley().isValid() ) { $.ajax(...) }
});

 //Only Allow Numbers document.querySelector('#zipcode').addEventListener("input", function (event) { this.value = this.value.replace(/[^0-9]/g, "").substring(0, 5); }); Parsley.addValidator('zip', { validateString: function (value) { // Zippopotam.us returns a status 404 for incorrect zip codes, // so we simply return the ajax request: return $.ajax({ url: '//www.zippopotam.us/us/' + value, success: function (result, success) { $('#zipState').val(result['places'][0]['state abbreviation']); }, error: function (result, success) { $('#zipState').val(''); } }) } }); 

 form .parsley-error{ border: 2px solid #ba0000 !important; } form .parsley-errors-list{ margin-top: 0; margin-bottom: 0; color: red;} 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.8.0/parsley.js"></script> <form data-parsley-validate> <label for="zipcode">ZIP CODE</label> <input type="tel" id="zipcode" name="zipcode" autocomplete="on" required="" data-parsley-required-message="Required" data-parsley-minlength="5" data-parsley-minlength-message="Invalid 5-Digit Zip" data-parsley-trigger="focusout" data-parsley-validZipcodeCheck="" data-parsley-validZipcodeCheck-message="Invalid Zipcode" data-parsley-zip="us" data-parsley-zip-message="Invalid US Zip" maxlength=5 /> <div> <label>State</label> <input disabled id="zipState" name="State" /> </div> <!--input type="submit" value="SUBMIT Zipcode" /--> <form>