Проверка jQuery Проверки Частичной Формы Плагина в функции OnClick

Question

Моя проблема очень похожа на этот пост: Проверка подмножества формы с помощью jQuery Validate Pugin , но не удалось заставить что-либо работать. Я пытаюсь использовать плагин проверки jquery для частичной проверки формы в функции js onclick.

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

<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>

Моя функция NextPage () js скрывает и показывает элементы div, чтобы получить эффект мастера для пошагового выполнения вопросов. Здесь я хочу сделать проверку, чтобы убедиться, что входные данные в этом 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>