Question

我正在尝试调用服务以检查邮政编码是否有效...如果不是则显示欧芹错误'Zipcode'无效。

之前我已经完成了自定义欧芹验证，之前我已经完成了ajax请求，但我不知道如何将两者结合起来进行异步欧芹验证。

注意：验证是在'focusout'上触发的，所以只需按Tab键或点击即可触发验证

所需行为：

如果输入的Zipcode与状态无关。它应该给出错误

有效邮编：222222 = VA

有效邮编：444444 = OH

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

当前行为：

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

相关的Stackoverflow问题，但未能找到解决方案：

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

1）Custom Parsley.js asynchronous validator loops twice

2）How to return value from an asynchronous callback function?

有关代码的说明：

现在我只有一个在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(...) }
});

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

欧芹异步自定义验证

1 个答案: