Javascript OnClick函数中的jquery验证插件部分表单验证

我的问题与这篇文章非常相似，但无法让任何东西起作用。 我尝试使用onclick js函数进行部分表单验证

我有一个视图，它有一个包含许多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>

如何使用jquery validator来完成这种类型的部分表单验证？

查看：

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

---

我还发现我可以使用：请选择一个来控制错误消息在页面divs中的任何位置。对于问题1，请选择一个。关于问题2
<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>