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

Question

我的问题与这篇文章非常相似： 使用jQuery Validate Pugin验证表单的子集 ，但无法获得任何工作。 我正在尝试使用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>

我的NextPage（）js函数隐藏并显示div以获得向导效果来逐步解决问题。 这是我想要进行验证的地方，以确保验证该div中的输入。 div中的输入可以是一组radiobutton，其中至少需要一个选择，或者单个文本框需要在继续之前进入。

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