无法使用Ajax和jQuery验证提交表单

无法使用Ajax和jQuery验证提交表单,jquery,ajax,forms,post,jquery-validate,Jquery,Ajax,Forms,Post,Jquery Validate,我承认,我是AJAX新手,我总是用老办法提交表单,表单上有一个post操作,这很好。现在,我正在尝试使用jQuery验证插件通过AJAX在jQuery中提交表单 我还没有开始检查我的服务器端验证,我只是想确保我可以验证并提交我的客户端信息。我找不到一个单一的资源将其全部放在一起。我可以找到很多关于验证工作的信息,我也找到了关于通过AJAX发布的信息,但我似乎无法将所有信息串在一起 我的提交代码有点像这样: $(function() { $("#contactForm .submit-button

我承认,我是AJAX新手,我总是用老办法提交表单,表单上有一个post操作,这很好。现在,我正在尝试使用jQuery验证插件通过AJAX在jQuery中提交表单

我还没有开始检查我的服务器端验证,我只是想确保我可以验证并提交我的客户端信息。我找不到一个单一的资源将其全部放在一起。我可以找到很多关于验证工作的信息,我也找到了关于通过AJAX发布的信息,但我似乎无法将所有信息串在一起

我的提交代码有点像这样:

$(function() {
$("#contactForm .submit-button").click(function() {
    var Name = $("#Name").val();
    var Phone = $("#Phone").val();
    var Email = $("#Email").val();
    var Message = $("#Message").val();
    var dataString = 'Name=' + Name + '&Phone=' + Phone + '&Email=' + Email + '&Message=' + Message;

    $.ajax({
    type: "POST",
    url: "scripts/contactengine.php",
    data: dataString,
    success: function(){
        $('#contactForm').fadeOut(1000);
              $('.thanks').fadeIn(1000);
    }
    });
    return false;

}); 
})

但是,我似乎必须使用jQuery验证的提交处理程序:

$("#myForm").validate({
rules: {
    command: 'required'
},

messages: {
    command: 'Please enter a command.'
},

submitHandler: function(form) {
    $(form).ajaxSubmit({
        success: function(data) { /* ... */ },
        url: form.action,
   });
我的问题是,我尝试了几种不同的方法来组合我的代码,但我似乎无法创造任何魔力。。。我也做了一些搜索,但我什么也没找到

我希望有人能帮我解释一下我需要做什么才能把它整合到一起,如果有人能推荐一个好的资源来使用这种方法在PHP中进行服务器端验证,我会非常感激


谢谢大家!

.ajaxSubmit
使用jQuery表单插件。如果您没有包括它,您将得到一个脚本错误,您可以在任何浏览器控制台中看到它。将读取ajaxSubmit不是函数或类似函数,具体取决于浏览器

你可以采取以下几种方法

在验证插件外部定义提交处理程序并删除submitHandler选项:

$("#contactForm").submit(function() {
      var $form=$(this)
    /* don't need to manually code each key/value pair*/
    var data= $form.serialize()

    $.ajax({
    type: "POST",
    url: "scripts/contactengine.php",
    data: data,
    success: function(){
        $form.fadeOut(1000);
              $('.thanks').fadeIn(1000);
    }
    });
    return false;

}); 
或者在验证插件的submitHandler选项中,您可以将自己的ajax称为:

submitHandler: function(form) {
   var data= $(form).serialize()

        $.ajax({
        type: "POST",
        url: "scripts/contactengine.php",
        data: data,
        success: function(){
            $(form).fadeOut(1000);
                  $('.thanks').fadeIn(1000);
        }
        });
    return false;
}