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.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
Before implementing jQuery validation on multiple forms, make sure you have:<\/p>\n\n\n\n
Add the necessary jQuery and jQuery Validation Plugin files in the HTML head section.<\/p>\n\n\n\n
Create three separate forms representing different steps:<\/p>\n\n\n\n
<form id=\"form1\">Step #1\n\n<input type=\"text\" name=\"field1\" \/><br \/>\n\n<button type=\"button\" id=\"gotoStep2\">Go to step 2<\/button>\n\n<\/form>\n\n<form id=\"form2\">Step #2\n\n<input type=\"text\" name=\"field2\" \/><br \/>\n\n<button type=\"button\" id=\"gotoStep3\">Go to step 3<\/button>\n\n<\/form>\n\n<form id=\"form3\">Step #3\n\n<input type=\"text\" name=\"field3\" \/><br \/>\n\n<button type=\"submit\">Complete<\/button>\n\n<\/form><\/pre>\n\n\n\nThe three forms represent three different steps:<\/p>\n\n\n\n
field1<\/code> and a button to move to Step 2.<\/li>\n\n\n\n- Step 2<\/strong> contains
field2<\/code> and a button to move to Step 3.<\/li>\n\n\n\n- Step 3<\/strong> contains
field3<\/code> and the final submit button.<\/li>\n<\/ul>\n\n\n\nStep 2: Add jQuery Validation<\/h3>\n\n\n\n
Add the following script code inside the script tag:<\/p>\n\n\n\n
$(document).ready(function () {\n\n$('#form1').validate({\n\n\/\/ rules\n\n rules: {\n\n field1: {\n\n required: true\n\n}\n\n}\n\n});\n\n\n$('#form2').validate({\n\n```javascript\n rules: {\n\n field2: {\n\n required: true\n\n}\n\n}\n\n});\n\n\n$('#form3').validate({\n\n```javascript\n rules: {\n\n field3: {\n\n required: true\n\n}\n\n},\n\n submitHandler: function (form) {\n\n\/\/ serialize and join data for all forms\n\n\/\/ ajax submit\n\nalert('go ajax');\n\nreturn false;\n\n}\n\n});\n\n\n$('#gotoStep2').on('click', function () {\n\n```javascript\nif ($('#form1').valid()) {\n\n\/\/ code to reveal step 2\n\n $('#form1').hide();\n\n $('#form2').show();\n\n}\n\n});\n\n\n$('#gotoStep3').on('click', function () {\n\n```javascript\nif ($('#form2').valid()) {\n\n\/\/ code to reveal step 3\n\n $('#form2').hide();\n\n $('#form3').show();\n\n}\n\n});\n\n\/\/ there is no third click handler since the plugin takes care of this with the\n\n\/\/ built-in submitHandler callback function on the last form.\n\n});<\/pre>\n\n\n\nThe validation rules are applied separately to each form. The required<\/code> rule ensures that the user provides a value for each required field before proceeding.<\/p>\n\n\n\nStep 3: Validate the First Form<\/h3>\n\n\n\n
The first form is validated when the user clicks the Go to step 2<\/strong> button:<\/p>\n\n\n\n$('#gotoStep2').on('click', function () {\n if ($('#form1').valid()) { \n $('#form1').hide();\n $('#form2').show(); \n } \n});<\/pre>\n\n\n\nThe .valid()<\/code> method checks whether the fields in form1<\/code> satisfy the configured validation rules.<\/p>\n\n\n\nIf the form is valid, the first form is hidden and the second form is displayed.<\/p>\n\n\n\n
Step 4: Validate the Second Form<\/h3>\n\n\n\n
The second form follows the same process:<\/p>\n\n\n\n
$('#gotoStep3').on('click', function () {\n\n if ($('#form2').valid()) {\n\n $('#form2').hide();\n\n $('#form3').show();\n\n }\n\n});<\/pre>\n\n\n\nIf the second form passes validation, it is hidden and the third form is displayed.<\/p>\n\n\n\n
Step 5: Handle the Final Form Submission<\/h3>\n\n\n\n
The third form uses the submitHandler<\/code> provided by the jQuery Validation Plugin:<\/p>\n\n\n\nsubmitHandler: function (form) {\n\n \/\/ serialize and join data for all forms\n\n \/\/ ajax submit\n\n alert('go ajax');\n\n return false;\n\n}<\/pre>\n\n\n\nThe submitHandler<\/code> is executed only after the final form passes validation. The form data can be serialized and submitted using AJAX as required by the application.<\/p>\n\n\n\nConclusion<\/h2>\n\n\n\n
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.<\/p>\n\n\n\n
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<\/code> callback to handle the final submission.<\/p>\n\n\n\nFAQs<\/h2>\n\n\n\n1. Can jQuery validate multiple forms separately?<\/h4>\n\n\n\n
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.<\/p>\n\n\n\n
2. How can I prevent the user from moving to the next tab if validation fails?<\/h4>\n\n\n\n
Use the .valid()<\/code> method on the current form before displaying the next form. If validation fails, the next step will not be displayed.<\/p>\n\n\n\nFor example:<\/p>\n\n\n\n
if ($('#form1').valid()) {\n $('#form1').hide();\n $('#form2').show();\n}<\/pre>\n\n\n\n3. How is the final form submitted?<\/h4>\n\n\n\n
The final form uses the submitHandler<\/code> callback provided by the jQuery Validation Plugin. This callback can be used to process the form data or submit it through AJAX.<\/p>\n\n\n\nRelated Articles<\/h2>\n\n\n\n