jquery Validate Plugin Partial Form Validation в функции OnClick

Question

Моя проблема очень похожа на эту запись: Validate subset of form using jQuery Validate Pugin, но ничего не получилось для работы. Я пытаюсь использовать the jquery validation plugin, чтобы выполнить частичную проверку формы в функции onclick js.

У меня есть мнение, что имеет форму со многими дивами, каждый ДИВ представляет собой страницу, как так:

<form method="post" name="surveyForm" id="surveyForm> 
    <div id="pageNav"> 
     <input id="prevButton" type="button" onclick="PrevPage();" value="Back" /> 
     <input id="nextButton" type="button" onclick="NextPage();" value="Next" /> 
    </div> 
    <div id="page_1"> 
     Question 1 
     <input id="q1_opt1" name="q1" type="radio" value="Yes" />Yes 
     <input id="q1_opt2" name="q1" type="radio" value="No" />No 
    </div> 
    <div id="page_2"> 
     Question 2 
     <input id="q2_opt1" name="q2" type="radio" value="Yes" />Yes 
     <input id="q2_opt2" name="q2" type="radio" value="No" />No 
    </div> 
    <button type="submit">Submit Survey</button> 
</form> 

Моей СледующаяСтраницу) JS функции шкур (и показывает дивы, чтобы получить эффект мастера шагнуть через вопросов. Вот где я хочу сделать валидацию, чтобы убедиться, что входные данные в этом div подтверждены. Входы в div могут быть группой радиолюбителей, где требуется хотя бы один выбор или один текстовый блок, который требует ввода, прежде чем двигаться дальше.

//on initialize I hide all page_# divs except page_1 
    var curPage=1; 
    function NextPage() 
    { 
     //****WANT TO DO VALIDATION HERE 
     // Cancel page change if validation fails 
     $("#page_" + curPage.toString()).hide(); //hide current page div 
     curPage++; //increment curpage 
     $("#page_" + curPage.toString()).show(); //show new current page div 
    } 

Как использовать валидатор jquery для выполнения этого типа частичной проверки формы?

Answer 1

Вид:

<form method="post" name="surveyForm" id="surveyForm> 
    <div id="pageNav"> 
     <input id="prevButton" type="button" onclick="PrevPage();" value="Back" /> 
     <input id="nextButton" type="button" onclick="NextPage();" value="Next" /> 
    </div> 
    <div id="page_1" class="wizardPage"> 
     Question 1 
     <input id="q1_opt1" name="q1" type="radio" value="Yes" class="required:true" />Yes 
     <input id="q1_opt2" name="q1" type="radio" value="No" />No 
    </div> 
    <div id="page_2" class="wizardPage"> 
     Question 2 
     <input id="q2_opt1" name="q2" type="radio" value="Yes" class="required:true" />Yes 
     <input id="q2_opt2" name="q2" type="radio" value="No" />No 
    </div> 
    <button type="submit">Submit Survey</button> 
</form> 

Сценарий:

<script type="text/javascript"> 
var curPage=1; 
function NextPage() { 
    if (curPage < 4) { 
     var group = "#page_" + curPage.toString(); 
     var isValid =true; 
     $(group).find(':input').each(function (i, item) { 
       if (!$(item).valid()) 
       isValid = false; 
      }); 

     if(!isValid){ alert("VALIDATION ERROR"); } 
     else{ 
      $("#page_" + curPage.toString()).hide(); //hide current page div 
      curPage++; //increment curpage 
      $("#page_" + curPage.toString()).show(); //show new current page div 
     } 
    } 
} 
function PrevPage() { 

    if (curPage > 1) { 
     $("#page_" + curPage.toString()).hide(); //show new current page div 
     curPage--; //increment curpage 
     $("#page_" + curPage.toString()).show(); //hide current page div 
    } 
} 

function InitializePage() { 
    $(".wizardPage").hide(); 
    $("#page_" + curPage.toString()).show(); 


    $("#surveyForm").validate({onsubmit: false }); 
} 

$(document).ready(InitializePage 
    ); 
</script>