为每个手风琴提交一份表格

Question

我有一个手风琴，里面有4个标题/部分，每个标题/部分都有一个表单。我需要将每个表单提交到服务器，并给出回调，以及验证，然后用户才能进入流程的下一步。我有验证工作-我只是使用了默认设置。现在，如何为提交的每个表单获取回调？我知道我需要分配每个Next按钮来提交，但我不知道如何使用这个脚本来完成，因为这个脚本是为一个表单的单个提交而设计的。

我也不允许使用PHP，因为它不是我们在这里使用的东西。我们使用JSP进行数据调用，因此请不要使用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; 
}); 

})；

函数showRequest（formData，jqForm，options）｛var queryString=$.param（formData）；

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

}

函数showResponse（responseText、statusText、xhr、$form）｛

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

}

Answer 1

您需要先验证然后提交。参见文档

例如

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

Answer 2

好吧，我只是担心这会解决问题——这不是我想做的——但无论如何，这是我提出的"解决方案"，但正如我所说，现在第二部分和第三部分的验证不起作用。我相信按键通话很简单，但我无论如何都不是专家。这是我当前的代码：

$(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;
  }
});

})；