jquery - 为每个 Accordion 提交一份表格

Question

我有一个带有 4 个标题/部分的 Accordion ，每个标题/部分中都有一个表单。我需要将每个表单提交到服务器并给出回调，以及在用户可以继续该过程的下一步之前进行验证。我已经进行了验证 - 我只是使用了默认设置。现在我如何获得每个提交的表单的回调？我知道我需要分配每个“下一步”按钮来提交，但我不知道如何使用此脚本执行此操作，因为此脚本是为一个表单的单个提交而设计的。

我也不被允许使用 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, 选项) { var queryString = $.param(formData);

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

}

函数 showResponse(responseText, statusText, xhr, $form) {

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

}

Answer 1

您需要先验证然后提交。请参阅docs

例如

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

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