jQuery validate：フィールドの検証時にのみフォームを送信

Question

私のフォームの検証には以下のコードを使用しています。検証はうまくいっていますが、フォームを送信するときに問題があります。そして、問題は：フォームが検証されていない場合でも、 "フォームの送信"ボタンがクリックされるたびに、フォームはPHPファイルに送信されます。

どうすれば修正できますか？

..

おかげで多くのことを私はsubmitHandlerを研究してきましたが、私は、Ajaxとそれを使用してシリアライズする方法がわかりません！

<script> 
$(document).ready(function(){ 
    $("#form").validate({ 
     rules: { 
     name: { 
      required: true 
     }, 
     lname: { 
      required: true 
     } 

     }, 
     messages: { 
     name: { 
      required: "* required" 
     }, 
     lname: { 
      required: "* required" 
     } 
     } 

    }); //end validate 

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

    theUrl = 'form.php'; 

    var params = $(this).serialize(); 
    $.ajax ({ 
      type: "POST", 
      url: theUrl, 
      data: params, 
      processData:false, 
      async:false, 
      success: function(result) { 

       //if (data != "") alert (data); 
      } 
    }); 
    //return false; 
    }); //end submit 

}); //end document ready 



</script> 

Answer 1

あなたは検証プラグインのsubmitHandlerパラメータであなたのAJAX要求コードを配置する必要があります。現在、AJAXリクエストはsubmit()イベントで実行されており、すべての検証結果に対応しています。はい

$(document).ready(function(){ 
    $("#form").validate({ 
     rules: { 
      name: { required: true }, 
      lname: { required: true } 
     }, 
     messages: { 
      name: { required: "* required" }, 
      lname: { required: "* required" } 
     }, 
     submitHandler: function(form) { 
      theUrl = 'form.php'; 
      var params = $(form).serialize(); 

      $.ajax ({ 
       type: "POST", 
       url: theUrl, 
       data: params, 
       processData: false, 
       async: false, 
       success: function(result) { 
        //if (data != "") alert (data); 
       } 
      }); 
     } 
    }); //end validate 
}); 

More information on the submitHandler parameter.