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

}）;

function showRequest（formData，jqForm，options）{ var queryString = $ .param（formData）;

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

}

function 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

e.g

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

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

Answer 2

好吧，我只是担心会关闭这个问题 - 这不是我想要做的 - 但无论如何，这是＆＃34;解决方案＆＃34;我提出了，但正如我所说，现在第二和第三部分的验证都没有工作。我确定按钮调用很简单，但我绝不是专家。这是我目前的代码：

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

}）;

为每支手风琴提交表格

2 个答案: