Geek Answers Handbook

Jquery Validate Plugin Partial Form Validation in OnClick Function

My problem is very similar to this post: Validate a subset of a form using jQuery Validate Pugin , but cannot make anything work. I am trying to use the jQuery validation plugin to partially validate a form in the onclick js function.

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

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

The MyJetPage () js function hides and shows divs to get the wizard effect to get through the questions. This is where I want to do validation to make sure the input in this div is validated. The inputs to the div can be a group of ham enthusiasts where at least one choice or one text block is required that requires input 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 can I use jquery validator to validate this type of partial form?

+4
source share
1 answer

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>
+1
source

More articles:


All Articles