I am currently exploring how to integrate jQuery validate into my questionnaire form. The form is divided into sections (divs) that are hidden and revealed using jQuery for a cleaner layout. My goal is to validate one section or specific fields at a time before moving on to the next section.
Below is some basic code showcasing the form structure:
<script>
$(document).ready(function(){
$(".go_section2").click(function(){
// Need to validate section 1 fields here, or prevent jumping to the next section
$("#section2").slideDown("slow");
});
$(".go_section3").click(function(){
// Need to validate section 3 fields here, or prevent jumping to the next section
$("#section3").slideDown("slow");
});
// etc...
});
</script>
<form name="theForm" id="theForm" class="theForm" method="POST" action="">
<!-- Section 1 -->
<div class="questionnaireHeader">Section 1 Header</div>
<div id="section1" class="questionnaireSection">
<label for="FirstName">First Name</label>
<input id="FirstName" name="FirstName"/><br />
<label for="LastName">Last Name</label>
<input id="LastName" name="LastName"/><br />
[form fields for section 1]<br />
<span class="go_section2">next</span>
</div>
<!-- Section 2 -->
<div class="questionnaireHeader">Section 2 Header</div>
<div id="section2" class="questionnaireSection" style="display:none;">
[form fields for section 2]
</div>
<!-- Further Sections -->
</form>
The desired functionality involves validating fields in each section before allowing progression to the next section. For example, clicking 'next' in section 1 should confirm that both First Name and Last Name have been completed (customizable rules). Fields can be highlighted in red if validation fails. Only when all validations pass, the following section should be displayed with its own validation criteria.
I would greatly appreciate any guidance as I am still unable to achieve successful results despite researching various examples.