带有 jquery 验证的 ajax 表单提交答案

【问题标题】：ajax form submission with jquery validations带有 jquery 验证的 ajax 表单提交
【发布时间】：2016-09-23 09:41:56
【问题描述】：

我正在尝试使用带有 jQuery 验证的 AJAX 提交我的联系表单。我认为传递表单数据存在错误。验证工作正常，但 AJAX 出了点问题，我无法弄清楚。请在下面查看我的代码并帮助我解决它。

$(document).ready(function(){
    $('#test-form').validate({
        rules: {
            name:{
                required: true,
            },
            org: {
                required: true,
            },
            email: {
                required: true,
                email:true,
                maxlength: 50,
            },
            phone:{
                number:true
            },
            message:{
                required: true,
            }
        },
        messages: {
            name: {
                required:"Enter Your Name",
            },
            org: {
                required:"Enter Your Organisation",
            },
            email: {
                required: "Enter Your Email Address",
                email: "Enter correct email format",
            },
            phone:{
                number : "Phone number must contain digits only",
            },
            message:{
                required: "Enter Your Message",
            }
        },
        submitHandler: function(form, e) {
            e.preventDefault();
            alert('three');

            var This = $(this);
            var action = $(This).attr('action');
            var data_value = unescape($(This).serialize());

            $.ajax({
                type: "POST",
                url: action,
                data: data_value,
                success: function(response) {
                    $('#ajax_contact_msg').html(response);
                }            
            });
            return false;
        }
    });
});

【问题讨论】：

检查您的控制台是否有错误。您发送的data_value 的值是多少？另请注意，无需将 This 放入 jQuery 对象中 - 它已经是一个

标签： jquery ajax validation

【解决方案1】：

而不是使用submitHandler 事件使用.valid() jQuery 验证功能。仅当所有表单字段都满足验证时才允许 ajax 调用。

请检查以下代码。

$(document).ready(function(){
  $('#test-form').validate({

    rules: {
      name:{
        required: true,
      },

      org:{
        required: true,
      },

      email:{
        required: true,
        email:true,
        maxlength: 50,

      },
      phone:{
        number:true
      },
      message:{
        required: true,
      }


    },
    messages: {
      name: {
        required:"Enter Your Name",
      },

      org: {
        required:"Enter Your Organisation",
      },

      email: {
        required: "Enter Your Email Address",
        email: "Enter correct email format",
      },
      phone:{

        number : "Phone number must contain digits only",
      },
      message:{
        required: "Enter Your Message",
      }

    }
  });
});

if($('#test-form').valid()){
  alert('three');

  var This = $(this);

  var action = $(This).attr('action');
  var data_value = unescape($(This).serialize());
  $.ajax({
    type: "POST",
    url:action,
    data: data_value,

    success: function(response) {
      $('#ajax_contact_msg').html(response);
    }            
  });
  return false;
}

【讨论】：

这意味着标准表单提交仍然发生，因此 AJAX 请求将无法正确完成。使用submitHandler 是正确的方法。