Introduction
Form validation is an important part of web application development. When a form is divided into multiple steps or tabs, each section needs to be validated before the user moves to the next step.
In this guide, we will explain how to implement jQuery validation for multiple forms displayed in different tabs or steps. Each form is validated before moving to the next step, while the final form handles the complete submission.
Prerequisites
Before implementing jQuery validation on multiple forms, make sure you have:
- Basic knowledge of HTML.
- Basic knowledge of JavaScript and jQuery.
- jQuery included in the application.
- jQuery Validation Plugin included in the application.
- Basic understanding of HTML forms.
- Basic understanding of form validation and submission.
Implementation
Step 1: Create the Forms
Add the necessary jQuery and jQuery Validation Plugin files in the HTML head section.
Create three separate forms representing different steps:
<form id="form1">Step #1 <input type="text" name="field1" /><br /> <button type="button" id="gotoStep2">Go to step 2</button> </form> <form id="form2">Step #2 <input type="text" name="field2" /><br /> <button type="button" id="gotoStep3">Go to step 3</button> </form> <form id="form3">Step #3 <input type="text" name="field3" /><br /> <button type="submit">Complete</button> </form>
The three forms represent three different steps:
- Step 1 contains
field1and a button to move to Step 2. - Step 2 contains
field2and a button to move to Step 3. - Step 3 contains
field3and the final submit button.
Step 2: Add jQuery Validation
Add the following script code inside the script tag:
$(document).ready(function () {
$('#form1').validate({
// rules
rules: {
field1: {
required: true
}
}
});
$('#form2').validate({
```javascript
rules: {
field2: {
required: true
}
}
});
$('#form3').validate({
```javascript
rules: {
field3: {
required: true
}
},
submitHandler: function (form) {
// serialize and join data for all forms
// ajax submit
alert('go ajax');
return false;
}
});
$('#gotoStep2').on('click', function () {
```javascript
if ($('#form1').valid()) {
// code to reveal step 2
$('#form1').hide();
$('#form2').show();
}
});
$('#gotoStep3').on('click', function () {
```javascript
if ($('#form2').valid()) {
// code to reveal step 3
$('#form2').hide();
$('#form3').show();
}
});
// there is no third click handler since the plugin takes care of this with the
// built-in submitHandler callback function on the last form.
});
The validation rules are applied separately to each form. The required rule ensures that the user provides a value for each required field before proceeding.
Step 3: Validate the First Form
The first form is validated when the user clicks the Go to step 2 button:
$('#gotoStep2').on('click', function () {
if ($('#form1').valid()) {
$('#form1').hide();
$('#form2').show();
}
});
The .valid() method checks whether the fields in form1 satisfy the configured validation rules.
If the form is valid, the first form is hidden and the second form is displayed.
Step 4: Validate the Second Form
The second form follows the same process:
$('#gotoStep3').on('click', function () {
if ($('#form2').valid()) {
$('#form2').hide();
$('#form3').show();
}
});
If the second form passes validation, it is hidden and the third form is displayed.
Step 5: Handle the Final Form Submission
The third form uses the submitHandler provided by the jQuery Validation Plugin:
submitHandler: function (form) {
// serialize and join data for all forms
// ajax submit
alert('go ajax');
return false;
}
The submitHandler is executed only after the final form passes validation. The form data can be serialized and submitted using AJAX as required by the application.
Conclusion
jQuery Validation provides a simple way to validate multiple forms displayed across different tabs or steps. Each form can have its own validation rules, allowing users to complete one step before moving to the next.
In this implementation, the first and second forms are validated before the user can proceed to the next step, while the final form uses the submitHandler callback to handle the final submission.
FAQs
1. Can jQuery validate multiple forms separately?
Yes. The jQuery Validation Plugin can be initialized separately for each form using its respective form ID. Each form can have its own validation rules.
2. How can I prevent the user from moving to the next tab if validation fails?
Use the .valid() method on the current form before displaying the next form. If validation fails, the next step will not be displayed.
For example:
if ($('#form1').valid()) {
$('#form1').hide();
$('#form2').show();
}
3. How is the final form submitted?
The final form uses the submitHandler callback provided by the jQuery Validation Plugin. This callback can be used to process the form data or submit it through AJAX.
Related Articles
Talk to our experts
Looking for the right technology solution for your business? Our team of experts can help you with development, cloud, DevOps, design, and a wide range of other technology needs. Get in touch with our team here.