jquery Validate Plugin Partial Form Validation in OnClick Function

Question

My problem is very similar to this post: Validate subset of form using jQuery Validate Pugin, but couldn't get anything to work. I'm trying to use the jquery validation plugin to do partial form validation in an onclick js function.

I have a view that has a form with many divs, each div represents a page like so:

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

My NextPage() js function hides and shows divs to get a wizard effect to step through the questions. This is where I want to do the validation to make sure the inputs in that div are validated. The inputs within a div could be a group of radiobuttons where at least one selection is required or a single textbox that requires entry before moving on.

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

How would I use jquery validator to accomplish this type of partial form validation?

Answer 1

You may take a look at this article.

Answer 2

View:

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

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