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コードをイベントハンドラ内に配置する必要があるため、フォームが検証をパスするときにのみ呼び出されます。

以下は、検証プラグインの適切な実装例です。クリックハンドラの中に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>タグを別々に設定する必要はありません。すべては一度封入できます。