AJAX和jQuery驗證問題

Question

所以我陷入了死衚衕。我有AJAX腳本和jQuery驗證插件。有了這個腳本，當我的頁面加載空時，聯繫表單會自動提交。如果我移動或添加$('#submit').click(function() {而不是AJAX腳本部分，則在$(document).ready(function() {之下，然後提交它將忽略我的驗證表單。

任何幫助將不勝感激。

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script> 
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js'></script> 
<script> 
    var captcha_a = Math.ceil(Math.random() * 10); 
    var captcha_b = Math.ceil(Math.random() * 10); 
    var captcha_c = captcha_a + captcha_b; 

    function generate_captcha(id){ 
     var id = (id) ? id : 'lcaptcha'; 
     $("#"+id).html(captcha_a + " + " + captcha_b + " = "); 
    } 

    $(document).ready(function() { 

     $('#submit').click(function() { 

      jQuery.validator.addMethod("math", 
       function(value, element, params) { return this.optional(element) || value == params[0] + params[1]; }, 
       jQuery.format("Please enter the correct value for {0} + {1}") 
      ); 

      $("#commentform").validate({ 
       rules: { 
        captcha: { 
         math: [captcha_a, captcha_b] 
        } 
       } 
      }); 

     }); 

    }) 
</script> 

<script> 
    $(document).ready(function() { 

     var name = $('input[name=name]'); 
     var phone = $('input[name=phone]'); 
     var email = $('input[name=email]'); 
     var reason = $('select[name=reason]'); 
     var info = $('textarea[name=info]'); 

     var data = 'name=' + name.val() + '&phone=' + phone.val() + '&email=' + email.val() +'&reason=' + reason.val() + '&info=' + encodeURIComponent(info.val()); 

     $('.loading').show(); 

     $.ajax({ 
      url: "ajaxformtoemail.php", 
      type: "GET", 
      data: data, 
      cache: false, 
      success: function (html) { 
       if (html==1) { 
        $('.form').fadeOut('slow'); 
        $('.done').fadeIn('slow'); 
       } else alert('Sorry, unexpected error. Please try again later.'); 
      } 
     }); 
     return false; 
    }); 
</script> 

Answer 1

您的ajax正在頁面加載中運行，因爲沒有任何東西阻止它。您需要將ajax代碼放入事件處理程序中，因此只有在您的表單通過驗證時纔會調用它。

以下是適當實施驗證插件的示例。而且您不需要將validate()放入點擊處理程序中。驗證插件有一大堆自己的處理程序，包括submitHandler，當表單通過驗證時觸發。

<script type='text/javascript'> 

$(document).ready(function() { 

    jQuery.validator.addMethod("math", 
     function(value, element, params) { return this.optional(element) || value == params[0] + params[1]; }, 
     jQuery.format("Please enter the correct value for {0} + {1}") 
    ); 

    $('form').validate({ 
     rules { 
      // your rules 
     }, 
     submitHandler: function(form) { 
      $.ajax({ 
       // your ajax parameters 
      });   
      return false; 
     } 
    }); 

}); 

</script> 

Validation Plugin Documentation

一些枝節問題...

1. 您的代碼會更容易閱讀&排查，如果你使用正確的縮進和標準格式。

2. 有沒有必要使用重複document.ready函數。一切都可以在一個裏面。

3. 和＃2一樣，您不需要單獨設置<script></script>標籤來包含您的代碼。一切都可以封閉一次。