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>标签来包含您的代码。一切都可以封闭一次。