jquery驗證和阿賈克斯不能在移動工作

Question

我有一個腳本，驗證和提交使用jquery驗證和阿賈克斯在桌面上，但不是在移動。我找不到問題。

他們會爲點擊但未進一步，

其約兩形式，這幾乎是完全一樣的，但一些細微的差別。 這是我的javascript。 `

$(document).ready(function() { 
      $("#offerteSeperateForm #ck-button.submit").click(function() { 
      $("#offerteSeperateForm").validate({ 
       ignore: ":hidden", 
       rules: { 
        name:{ 
         minlength:2, 
         required:true       
        }, 
        telephone:{ 
         required:true, 
         minlength:10, 
         maxlength:10   
        }, 
        email:{ 
         required:true, 
         email: true     
        }, 
        personen:{ 
         required:true       
        }, 
        personen:{ 
         required:true, 
         number: true 
        }, 
        day:{ 
         required:true, 
         number: true, 
         maxlength:2, 
         max: 31, 
         min: 0 
        }, 
        month:{ 
         required:true, 
         number: true, 
         maxlength:2, 
         max: 12, 
         min: 0 
        }, 
        year:{ 
         required:true, 
         number: true, 
         min: <?php echo date('Y'); ?> 
        } 
       }, 
       submitHandler: function (form) { 




        $.ajax({ 
         var data = $('form#offerteSeperateForm').serialize(); 
         //this is the php file that processes the data and send mail 
         url: "<?php bloginfo('template_url'); ?>/processOfferteSeperate.php", 

         //GET method is used 
         type: "POST", 

         //pass the data   
         data: data,  

         //Do not cache the page 
         cache: false, 


         //success 
         success: function (html) {  

          //if process.php returned 1/true (send mail success) 
          if (html==1) {     
    alert('succes'); 
          window.location = "<?php echo site_url(); ?>/?p=146"; 

          //if process.php returned 0/false (send mail failed) 
          } else alert('Sorry, er ging iets mis. Wilt u het nogmaals proberen?');    
         }  
        }); 

      return false; 
       } 
      }); 

     }); 



      $("#offerteForm #ck-button.submit").click(function() { 

      $("#offerteForm").validate({ 
       ignore: ":hidden", 
       rules: { 
        name:{ 
         minlength:2, 
         required:true       
        }, 
        telephone:{ 
         required:true, 
         minlength:10, 
         maxlength:10   
        }, 
        email:{ 
         required:true, 
         email: true     
        }, 
        personen:{ 
         required:true       
        }, 
        personen:{ 
         required:true, 
         number: true 
        }, 
        day:{ 
         required:true, 
         number: true, 
         maxlength:2, 
         max: 31, 
         min: 0 
        }, 
        month:{ 
         required:true, 
         number: true, 
         maxlength:2, 
         max: 12, 
         min: 0 
        }, 
        year:{ 
         required:true, 
         number: true, 
         min: <?php echo date('Y'); ?> 
        } 
       }, 
       submitHandler: function(form) { 

        $.ajax({ 
         var data = $('form#offerteForm').serialize(); 

         //this is the php file that processes the data and send mail 
         url: "<?php bloginfo('template_url'); ?>/processOfferte.php", 

         //GET method is used 
         type: "POST", 

         //pass the data   
         data: data,  

         //Do not cache the page 
         cache: false, 


         //success 
         success: function (html) {  
           alert('succes'); 
          //if process.php returned 1/true (send mail success) 
          if (html==1) {     

          window.location = "<?php echo site_url(); ?>/?p=146"; 

          //if process.php returned 0/false (send mail failed) 
          } else alert('Sorry, er ging iets mis. Wilt u het nogmaals proberen?');    
         }  
        }); 
        return false; 

       } 
      }); 
     }); 
    }); 

` 這些表單標籤

<form action="" id="offerteForm" method="post"> <form action="" id="offerteSeperateForm" method="post">

Answer 1

你的整個問題由認爲.validate()需要是click處理器的內外因。

.validate()方法不用於觸發驗證測試，也不能在同一表單上多次調用。

只需在您的DOM就緒事件處理程序中調用.validate()方法一次。 .validate()方法用於初始化插件。將捕獲click事件（只要按鈕包含type="submit"），然後自動執行驗證...（）。

---

編輯：

基礎上的評論，還是有由OP很大的混亂。

• 換句話說，使用您的代碼，插件甚至不會初始化，直到第一次點擊。

• 換句話說，您的第一次點擊只會初始化插件...然後它會坐在那裏，直到您第二次點擊纔會執行任何操作。此行爲可能在每個瀏覽器中都會有所不同，因爲它取決於每個事件的時間點（點擊既是初始化插件，也是嘗試在幾乎相同的時刻提交表單）。因此，使其一致和可預測的方法是簡單地在DOM就緒事件處理程序中初始化插件，並允許插件自行捕獲事件......完全按照設計。

的.validate()方法不會被認爲是一個click處理機的內部。

$(document).ready(function(){ // DOM ready event handler 

    $('#myform').validate({ // initialize the plugin 
     .... 

DEMO：http://jsfiddle.net/6he8a15n/

---

這不是完全清楚你是否遇到與jQuery Mobile的或者乾脆在移動平臺上這個問題。但是，爲了防止jQuery Mobile，DOM就緒事件處理程序看起來有點不同...

$(document).on('pageinit', function(){ // DOM ready event handler for jQuery Mobile 

    $('#myform').validate({ // initialize the plugin 
     .... 

手機DEMO：http://jsfiddle.net/6he8a15n/1/