2

4 つのヘッダー/セクションを持つアコーディオンがあり、それぞれにフォームが含まれています。各フォームをサーバーに送信し、コールバックを指定する必要があります。また、ユーザーがプロセスの次のステップに進む前に検証を行う必要があります。検証が機能しています-デフォルト設定を使用しました。送信される各フォームのコールバックを取得するにはどうすればよいですか? 送信する各 [次へ] ボタンを割り当てる必要があることはわかっていますが、このスクリプトは 1 つのフォームに対して 1 回送信するように設計されているため、このスクリプトでそれを行う方法がわかりません。

ここで使用するものではないため、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.');

}

4

2 に答える 2

0

最初に検証してから送信する必要があります。ドキュメントを見る

例えば

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

        // Do the submit
        $(form).ajaxSubmit(options);
   }
});
于 2012-08-30T16:25:06.613 に答える
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;
  }
});

});

于 2012-08-31T14:01:46.557 に答える