javascript - jquery Validate Plugin OnClick 函数中的部分表单验证

Question

我的问题与这篇文章非常相似:Validate subset of form using jQuery Validate Pugin ，但无法得到任何工作。我正在尝试使用 the jquery validation plugin在 onclick js 函数中进行部分表单验证。

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