歐芹異步定制驗證

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>