jQuery validate：仅在验证字段时提交表单答案

【问题标题】：jQuery validate: submitting form only when fields are validatedjQuery validate：仅在验证字段时提交表单
【发布时间】：2011-12-05 10:09:24
【问题描述】：

我正在使用下面的代码来验证我的表单。验证进行得很顺利，但我在提交表单时遇到了问题。问题是：每次单击“发送表单”按钮时，表单都会提交到 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>

【问题讨论】：

标签： jquery ajax serialization jquery-validate form-submit

【解决方案1】：

您需要将您的 AJAX 请求代码放在 validate 插件的 submitHandler 参数中。目前，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.

【讨论】：