2012-08-30 90 views
2

我有一個帶有4個標題/部分的手風琴,每個手風琴都有一個表格。我需要將每個表單提交給服務器並給出回調,以及在用戶進入流程中的下一個步驟之前進行驗證。我有驗證工作 - 我只使用默認設置。現在我如何獲得每個提交的表單的回調?我知道我需要分配每個下一個按鈕來提交,但是我不知道如何使用這個腳本來做到這一點,因爲這個腳本是爲單個表單提交的。提交每個手風琴的表格

我也不允許使用PHP,因爲這不是我們在這裏使用的東西。我們使用JSP來處理datacalls,所以請避免使用PHP響應。謝謝。

我的腳本進行驗證:

$(document).ready(function(){ 
// add * to required field labels 
$('label.form-field-label-required').append('&nbsp;<strong>*</strong>'); 

// accordion functions 
var accordion = $("#accordion").accordion(); 
var current = 0; 

$.validator.addMethod("pageRequired", function(value, element) { 
    var $element = $(element) 
    function match(index) { 
     return current == index && $(element).parents("#accordion").length; 
    } 
    if (match(0) || match(1) || match(2)) { 
     return !this.optional(element); 
    } 
    return "dependency-mismatch"; 
}, $.validator.messages.required) 


    var v = $("#cmaForm").validate({ 
    errorClass: "warning", 
    onkeyup: false, 
    onblur: false, 
    submitHandler: function() { 
     alert("Submitted, thanks!"); 
    } 
}); 


// back buttons do not need to run validation 
$(".prevbutton").click(function(){ 
    accordion.accordion("activate", 0); 
    current = 0; 
}); 
$(".prevbutton").click(function(){ 
    accordion.accordion("activate", 1); 
    current = 1; 
}); 
// these buttons all run the validation, overridden by specific targets above 
$(".open2").click(function() { 
    if (v.form()) { 
    accordion.accordion("activate", 2); 
    current = 2; 
    } 
}); 
$(".open1").click(function() { 
    if (v.form()) { 
    accordion.accordion("activate", 1); 
    current = 1; 
    } 
}); 
$(".open0").click(function() { 
    if (v.form()) { 
    accordion.accordion("activate", 0); 
    current = 0; 
    } 
}); 
}); 

我對劇本的形式提交:(我不知道發生了什麼與表單的格式提交腳本,但它不應該像她那樣)

$(document).ready(function() { 
var options = { 
    target:  '#output2', // target element(s) to be updated with server response 
    beforeSubmit: showRequest, // pre-submit callback 
    success:  showResponse, // post-submit callback 
    clearForm: true  // clear all form fields after successful submit  

}; 

$('#cmaForm').submit(function() { 
    $(this).ajaxSubmit(options); 
    return false; 
}); 

});

function showRequest(formData,jqForm,options)var queryString = $ .param(formData);

alert('About to submit: \n\n' + queryString); 
return true; 

}

功能showResponse方法(responseText的,狀態文本,XHR,$形式){

alert('status: ' + statusText + '\n\nresponseText: \n' + responseText + 
    '\n\nThe output div should have already been updated with the responseText.'); 

}

+0

is ajaxSubmit a plugin? – jeschafe

回答

0

您需要先驗證,然後提交。見docs

$('#cmaForm').validate({ 
    submitHandler: function(form) { 
     var options = { 
      target: '#output2', 
      beforeSubmit: showRequest, 
      success: showResponse, 
      clearForm: true   
     }; 

     // Do the submit 
     $(form).ajaxSubmit(options); 
    } 
}); 
+0

謝謝你的回覆。但我在提交之前進行驗證。我的問題是如何將它應用於每個Next按鈕,而不會影響Back按鈕。我意識到我有兩個不同的提交腳本,我給出了兩個示例來展示我目前正在使用的內容,但似乎我只需要一個腳本來驗證和提交,我只是不知道哪一個 - 但我是猜測它是第一個腳本,因爲第二個腳本只處理提交而不是任何驗證。原諒我對此不太清楚。工作了一個星期後,我感到非常沮喪。 –

+0

我想出了一些似乎有點破解的東西,雖然我不知道如何在這裏發佈代碼而不編輯我原來的帖子。但無論如何,現在我已經爲每個手風琴部分提交了提交,但驗證在第一部分之後不起作用。 ugh –

+0

@nutless_neo如果你找到一個答案,那麼寫出你自己的答案是完全可以接受的,所以你只需要這樣做。 –

0

好吧,我只是怕是要關閉的問題 - 這是不是我想做的事 - 但無論如何,這裏是「解決方案」,我想出了與,但正如我所說,現在第二和第三部分的驗證不起作用。我確信這是按鈕調用的簡單方法,但我不是任何方式的專家。這裏是我目前的代碼:

$(document).ready(function(){ 
// add * to required field labels 
$('label.form-field-label-required').append('&nbsp;<strong>*</strong>'); 

// accordion functions 
var accordion = $("#accordion").accordion(); 
var current = 0; 

$.validator.addMethod("pageRequired", function(value, element) { 
    var $element = $(element) 
    function match(index) { 
     return current == index && $(element).parents("#accordion").length; 
    } 
    if (match(0) || match(1) || match(2)) { 
     return !this.optional(element); 
    } 
    return "dependency-mismatch"; 
}, $.validator.messages.required) 

var v = $("#cmaForm, #cmaForm1, #cmaForm2").validate({ 
    errorClass: "warning", 
    onkeyup: false, 
    onblur: false, 
    submitHandler: function() { 
     var options = { 
     clearForm: true };   
     alert("Submitted, thanks!"); 
    } 

});

$(" .prevbutton").click(function(){ 
    accordion.accordion("activate", 0); 
    current = 0; 
}); 
$(" .prevbutton").click(function(){ 
    accordion.accordion("activate", 1); 
    current = 1; 
}); 
// these buttons all run the validation, overridden by specific targets above 
$(".open2").click(function() { 
    if (v.form()) { 
    accordion.accordion("activate", 2); 
    current = 2; 
    } 
}); 
$(".open1").click(function() { 
    if (v.form()) { 
    accordion.accordion("activate", 1); 
    current = 1; 
    } 
}); 
$(".open0").click(function() { 
    if (v.form()) { 
    accordion.accordion("activate", 0); 
    current = 0; 
    } 
}); 

});