2014-12-11 1 views
-1

여기 내 시나리오는 3 아코디언 레이아웃이 있습니다. 각 아코디언은 1 개의 형식을 포함합니다. 마찬가지로Asp.net MVC에서 다중 폼 유효성 검사 Jquery.valid() 사용

<div id="collapseOne"> 

@using(Html.BeginForm("","",FormMethod.Post,new{id="formOne"})) 
{ 

    @Html.TextBoxFor(m=>m.Name) 
    @Html.ValidationMessageFor(m=>m.Name) 

    @Html.TextBoxFor(m=>m.City) 
    @Html.ValidationMessageFor(m=>m.City) 

    <input type="button" value="Next" id="btnOne" /> 

} 

</div> 
<div id="collapseTwo"> 


@using(Html.BeginForm("","",FormMethod.Post,new{id="formTwo"})) 
{ 

    @Html.TextBoxFor(m=>m.Age) 
    @Html.ValidationMessageFor(m=>m.Age) 

    @Html.TextBoxFor(m=>m.Address) 
    @Html.ValidationMessageFor(m=>m.Address) 

    <input type="button" value="Next" id="btnTwo" /> 

} 

</div> 
<div id="collapseThree"> 

@using(Html.BeginForm("MyAction","MyController",FormMethod.Post,new{id="formThree"})) 
{ 

    @Html.TextBoxFor(m=>m.Email) 
    @Html.ValidationMessageFor(m=>m.Email) 

    @Html.TextBoxFor(m=>m.City) 
    @Html.ValidationMessageFor(m=>m.Email) 

    <input type="submit" value="Finish" id="btnThree" /> 

} 

</div> 

이제 위의 accordions에서 Next를 누르면 유효성 검사가 제대로 수행됩니다. 그러나 누군가 제 3 아코디언에 직접오고 마침을 누르면 제 3의 형식 만 유효성을 검사합니다. 다음은 내가 제공 할 것입니다 더 설명을하려면 내 JQuery와

function PageEvents(){ 
    $("#btnThree").click(function(event){ 
    event.preventDefault(); 
    if($("#formOne").valid()==false){ 
     // Open first Accordion 
    } 
    else if($("#formTwo").valid()==false){ 
     //Open second Accodion 
    } 
    else{ 
     if($("#formThree").valid()){ 
     $("#formThree").submit(); 
     } 
    } 
    }); 

$("#btnOne").click(function (event) { 
    event.preventDefault(); 
    if ($("#formOne").valid()) { 
     //trigger accordion two 
     $("collapseTwo").trigger("click"); 
    } 
}); 
$("#btnTwo").click(function (event) { 
    event.preventDefault(); 
    if ($("#formTwo").valid()) { 
     //trigger accordion two 
     $("collapseThree").trigger("click"); 
    } 
}); 

입니다. ... 어떻게 아직 열어 사용자가 3 아코디언 누릅니다 마감 버튼에 직접 제공하지 않는 그 형태를 확인하는

감사

+0

다중 단계 마법사를 수행하려고하십니까? –

+0

btnOne 및 btnTwo의 jquery 코드는 무엇입니까? –

+0

정확히 @StephenMuecke하지만 실제로는 마법사가 아니지만 마법사처럼 행동합니다. –

답변

2

당신은 validatin 숨겨진 필드, 기본적으로 JQuery와 유효성에 문제가있는 날 안내하세요 숨겨진 필드를 확인하지 않습니다, 당신은 단지 기본 변경할 수 있습니다

$.validator.setDefaults({ 
    ignore: [] 
}); 

구매 또한 탭을 diasble 수를, 그 here 그것을 수행하는 방법 예입니다 허용되어서는 안된다.

하지만 가장 좋은 방법은 this 같은 miltistep 마법사를 사용하는 것입니다.

+0

이 경우 btnThree를 클릭하면 유효한 모든 양식이 반환됩니다. 아직 유효하지 않습니다. –

+0

전체 div가 숨겨져 있으면 분명히 유효성 검사에 대해 true를 반환합니다. –

+0

이제 문제가 생겨서 해결책 –