각 아코디언에 대한 양식 제출

Question

4 개의 머리글/섹션이있는 아코디언이 있으며 각 섹션에는 양식이 있습니다. 사용자가 프로세스의 다음 단계로 진행하기 전에 각 양식을 서버 및 콜백에 제출하고 유효성 검사를 수행해야합니다. 유효성 확인 작업이 있습니다 - 방금 기본 설정을 사용했습니다. 이제 각 양식을 제출할 때 콜백을 어떻게받을 수 있습니까? 제출할 각 다음 버튼을 지정해야한다는 것을 알고 있지만이 스크립트는 하나의 양식에 대해 하나의 제출을 ​​위해 설계되었으므로이 스크립트로 어떻게 수행해야할지 모르겠다.

여기서는 PHP를 사용하지 않으므로 PHP를 사용할 수 없습니다. 우리는 datacalls에 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; 

}

기능 showResponse (에서 responseText,하는 statusText, XHR, $ 양식) {

alert('status: ' + statusText + '\n\nresponseText: \n' + responseText + 
    '\n\nThe 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

좋아 docs

예를 참조하지만 어쨌든, 여기에 "솔루션"입니다 내가 와서 함께,하지만 내가 말했듯이, 이제 두 번째 및 세 번째 섹션에 대한 유효성 검사가 작동하지 않습니다. 단추 통화로 간단하게 처리 할 수 ​​있다고 확신하지만 어떤 방법으로도 전문가가 아닙니다. 다음은 현재 코드입니다.

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

});