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

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.

我的问题与这篇文章非常相似：使用jQuery Validate Pugin验证表单的子集，但无法获得任何工作。我正在尝试使用jquery验证插件在onclick js函数中进行部分表单验证。

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

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

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.

我的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
    }

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

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

1 个解决方案

#1

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>