2012-10-30 77 views
2

提交表單我承認,我是新來的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做服務器端驗證,我會很感激。

謝謝!

回答

3

.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; 
}