等待Google Geocoder会产生一个jQuery自定义验证方法 [英] Waiting for Google Geocoder results in a jquery custom validation method

问题描述

我知道Google的地理编码器服务是异步的，但是我需要一种方法在Google地理编码器结果返回之后而不是之前将我的自定义jQuery验证方法返回true或false。 （例如，该服务将查找邮政编码，如果发现则返回true，否则返回false）。

编辑 - 是jQuery验证远程方法做到这一点的方法吗？

目前我有一组元素的规则，但是当我测试下面的代码时，一旦代码被加载， c $ c> getLocation 而不是当我想输入第5位数字时。

$ b

  $（'＃Location'）。规则（add，{
 required：true，
 minlength：5，
 maxlength：5，
 messages：{
 required：必需的输入，
 minlength：jQuery.validator.format（Please，{0} characters are necessary），
 maxlength：jQuery.validator.format（Please，{0} characters are necessary）
 }，
 remote：getLocation（）
}）; 
 
函数getLocation（）{
 var i = 0; 
} 
  

这是我的自定义方法。

  $ .validator.addMethod（validateZipCode，function（value，element）{
 var isValidZipCode = GetGoogleGeocoderResultsByZip（value）; 
返回zipCodeIsValid; 
}，无效位置）; 
 
 
 // geocode的结果是这样的，但我需要等待返回true / false 
函数GetGoogleGeocoderResultsByZip（zipCode）{
 var geocoder = new google.maps.Geocoder（）; 
 geocoder.geocode（componentRestrictions：{
country：United States，
postalCode：zipCode 
}，function（results，status）{
 if（status == google.maps.GeocoderStatus.OK）{
 if（results.length> = 1）{
 return true; 
} 
 return false; 
} 
} 
}; 
  

解决方案 div>

正如我所提到的在我的评论中，拉动默认 onkeyup 函数 from the plugin 并对其进行修改。

  $（＃contact）。validate（{
 onkeyup：function（element，event）{
 if（element.name ==zip-c ode）{
 return; //所有
都没有onkeyup验证else {
 //在这里默认的onkeyup验证
 var excludedKeys = [
 16,17,18,20,35,36,37 ，
 38，39，40，45，144，225 
]; 
 if（event.which === 9&& this.elementValue（element）===|| $ .inArray（event.keyCode，excludedKeys）！== -1）{
返回; 
} else if（this.ubmitted || element.name this.invalid中的元素名称）{
 this.element（element）; 
} 
} 
}，
 .... 
  

在下面的概念证明DEMO中，点击 submit 按钮以首先通过懒惰验证，然后比较两个字段的行为。第一个字段正在验证每个 keyup 事件的电子邮件地址。第二个字段没有针对 keyup 事件上的电子邮件进行验证，只在 focusout 和提交。

DEMO： http://jsfiddle.net/vbcpyv3q/

I know Google's Geocoder service is asynchronous, but I need a way to return true or false to my custom jQuery Validate method after the google geocoder results have returned and not before. (ex. the service will look up a zip code, if found return true, else return false).

Edit - Is jQuery Validate remote method the way to do it?

Currently I have a set of rules for the element, but when I test this code below the getLocation method gets called as soon as the code is loaded, not when a 5th digit is entered like I want.

$('#Location').rules("add", {
  required: true,
  minlength: 5,
  maxlength: 5,
  messages: {
    required: "Required input",
    minlength: jQuery.validator.format("Please, {0} characters are necessary"),
    maxlength: jQuery.validator.format("Please, {0} characters are necessary")
  },
  remote: getLocation()
});

function getLocation() {
  var i = 0;
}

Here is my custom method.

 $.validator.addMethod("validateZipCode", function(value, element) {
   var isValidZipCode = GetGoogleGeocoderResultsByZip(value);
   return zipCodeIsValid;
 }, "Invalid location");


 //the geocode results work something like this, but I need to wait to return true/false
 function GetGoogleGeocoderResultsByZip(zipCode) {
     var geocoder = new google.maps.Geocoder();
     geocoder.geocode("componentRestrictions": {
         "country": "United States",
         "postalCode": zipCode
       }, function(results, status) {
         if (status == google.maps.GeocoderStatus.OK) {
           if (results.length >= 1) {
             return true;
           }
           return false;
         }
       }
     };

解决方案

As I mentioned in my comment, pull the default onkeyup function from the plugin and modify it for your over-ride.

$("#contact").validate({
    onkeyup: function(element, event) {
        if (element.name == "zip-code") {
            return; // no onkeyup validation at all
        } else {
            // default onkeyup validation in here
            var excludedKeys = [
                16, 17, 18, 20, 35, 36, 37,
                38, 39, 40, 45, 144, 225
            ];
            if ( event.which === 9 && this.elementValue( element ) === "" || $.inArray( event.keyCode, excludedKeys ) !== -1 ) {
                return;
            } else if ( element.name in this.submitted || element.name in this.invalid ) {
                this.element( element );
            }
        }
    },
    ....

In the proof-of-concept DEMO below, hit the submit button to first get past the "lazy" validation, then compare the behavior of the two fields. The first field is validating for an email address on every keyup event. The second field is not validating for email on keyup events at all, only on focusout and submit.

DEMO: http://jsfiddle.net/vbcpyv3q/

这篇关于等待Google Geocoder会产生一个jQuery自定义验证方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！