jQuery驗證插件和異步更新

我有如下所示的腳本，並在http://jsbin.com/vuliw/1重複。jQuery驗證插件和異步更新

輸入#address經驗證爲（4）個或更多字符，並且在給定幾個字符的情況下也會自動填充。

我的問題是在輸入填充之前驗證它。要複製，請輸入幾個字符（小於4），然後單擊其中一個結果。雖然我的示例使用Google Maps API，但我希望能夠通過任何異步更新來獲得這些結果。

如何驗證最小長度？用戶選擇一個項目後

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>Validation</title> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" type="text/javascript"></script> 
     <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script> 
     <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js" type="text/javascript"></script> 

     <script type="text/javascript"> 
      $(function(){ 
       address.value=''; 
       var validator=$("#myForm").validate({rules: {address: {"minlength": 4,"required":true}}}); 
       var autocomplete = new google.maps.places.Autocomplete(document.getElementById('address')); 
      }); 
     </script> 

    </head> 
    <body> 
     <form id="myForm" action="bla.php" method="post"> 
      <input id="address" name="address" type="text"> 
     </form> 

    </body> 
</html>

來源

2014-03-04 user1032531

<script type="text/javascript"> 
     $(function(){ 
      address.value=''; 
      var validator=$("#myForm").validate({rules: {address: {"minlength": 4,"required":true}}}); 
      var autocomplete = new google.maps.places.Autocomplete(document.getElementById('address')); 
      google.maps.event.addListener(autocomplete, 'place_changed', function(){ 
       $("#myForm").valid(); 
      }); 
     }); 
    </script>

重新運行驗證。您可以使用由（place_changed）自動填充事件引導的有效（）方法執行此操作。

來源

2014-03-06 22:23:41

謝謝約翰，似乎工作，但我仍在測試。你能解釋一下它如何讓它起作用嗎？ – user1032531

由於事情是異步的，您需要確保您的支票在Google完成其工作後發生。 G會觸發一個事件（place_changed）來告訴您，這是從用戶選擇中自動填充列表中提取出來的。所以，如果我們確保在G完成後每次運行檢查，它都不會干擾其他任何事情。最糟糕的是，你正在運行額外的不必要的檢查，但這是由於validate（）插件如何監聽事件。這需要您在該庫內部進行核心更改以刪除ms或兩個額外檢查IFF用戶選擇自動完成項目。 –

啊，我明白了。驗證插件首先驗證給定的元素並顯示一個錯誤，然後Google做它的事情，然後整個表單被驗證，但這次給定的元素不再顯示錯誤。但是，表單上的其他元素將在用戶需要查看錯誤之前進行驗證。可以只使用'$（「＃myForm」）。valid（「address」）;'？我試過但沒有運氣。 – user1032531

jQuery驗證插件和異步更新

回答

相關問題