不能与Ajax和jQuery验证

问题描述:

提交表单我承认,我是新来的AJAX,我一直只是提交的表单老​​同学的方式与形式本身后行动,并一直很好。现在我正在尝试使用jQuery validate插件通过AJAX提交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 is not a funcion或类似取决于浏览器

有可以采取的办法sevaeral。

定义您提交处理程序的验证插件之外,并删除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; 
}