jquery 验证表单字段但未将表单数据提交到目标文件答案

【问题标题】：The jquery validating the form fields but not submitting the form data to targeted filejquery 验证表单字段但未将表单数据提交到目标文件
【发布时间】：2014-06-20 12:41:53
【问题描述】：

我正在尝试使用 jquery 和 ajax 验证联系我们表单，表单字段验证成功，但数据未提交到 php 文件，即contact_submit.php。请给我答案......谢谢！

 $(document).ready(function(){
    var $form = $(this);
        $('#frm').validate({
        rules: {
          name: {

            required: true
          },
          email: {
            required: true,
            email: true
          },
          mobile: {
            minlength: 10,
            maxlength:10,
            number:true,
            required: true
          },
          message: {
            required: true
          }
        },
            highlight: function(element) {
                $(element).closest('.control-group').removeClass('text-success').addClass('has-warning');
            },
            /*success: function(element) {
                element
                .text('OK!').addClass('valid')
                .closest('.control-group').removeClass('has-warning').addClass('text-success');
            },*/
            submitHandler: function(form)
            {
                $ajax({
                    url: "contact_submit.php",
                    type: "post",
                    data: $($form).serialize(),
                    success:function(response)
                    {
                        $('#msg').html('Your form is submited');
                    }

                });

            }
      });

});

我认为我的提交处理程序有错误。

【问题讨论】：

这样好吗？？？ '$($form)' ?
调试 AJAX 时，请始终打开浏览器的控制台，以便观察请求/响应。

标签： javascript jquery ajax jquery-validate

【解决方案1】：

首先，您在文档就绪函数中使用 var $form = $(this)，这里 $(this) 指的是文档而不是表单，并且在成功处理函数中使用此 $($form).serialize() ==> 不会返回任何内容。

更改：删除了var $form = $(this) 行并在submitHandler 中添加了$("#frm").serialize();。

试试这个代码..

 $(document).ready(function(){

            $('#frm').validate({
            rules: {
              name: {

                required: true
              },
              email: {
                required: true,
                email: true
              },
              mobile: {
                minlength: 10,
                maxlength:10,
                number:true,
                required: true
              },
              message: {
                required: true
              }
            },
                highlight: function(element) {
                    $(element).closest('.control-group').removeClass('text-success').addClass('has-warning');
                },
                /*success: function(element) {
                    element
                    .text('OK!').addClass('valid')
                    .closest('.control-group').removeClass('has-warning').addClass('text-success');
                },*/
                submitHandler: function(form)
                {
                    $ajax({
                        url: "contact_submit.php",
                        type: "post",
                        data: $("#frm").serialize(), //Or $(form).serialize()
                        success:function(response)
                        {
                            $('#msg').html('Your form is submited');
                        }

                    });

                }
          });

    });

【讨论】：

@user3736676，IMO，这应该是公认的答案，因为它准确地解释了您在使用 $form = $(this) 时出了什么问题。

【解决方案2】：

我认为问题出在data: $($form).serialize()线上 form 前面的美元符号不应该在那里。

【讨论】：

如果您指出了这个错误的根源，这将是一个更好的答案。第一行：var $form = $(this);，还解释了form 参数如何在插件的submitHandler 回调中可用。