Checking form sections

Question

I broke my form in the div and using the "Next" buttons to shop and hide these sections. I also use the jQuery validation plugin to do all the validation for me.

I need to know how to check a section by section. So here I am

• personal information
• Address Information
• Project Information
• Terms and Conditions

2,3 and 4 are hidden by default to make the form less complicated.

Clicking on the next button of personal information will hide this div and show the address data, etc.

On the very last screen, there is a submit form button that would then check the entire form, but I need to check each section before the user goes.

Here is what I thought was supposed to work:

CSS

.project-address {display:none;} 

HTML

  <form class="wpcf7"> <div class="project-details"> <h2>Project details</h2> <label>Project name: </label><input type="text" class="reg-project-name" size="40" value="" name="projectName"> <div class="back-next"><span class="reg-next-button">Next</span></div> </div> <div class="project-address"> <h2>Project address</h2> <label>Project address:</label><input type="text" class="reg-project-address" size="40" value="" name="projectAddress"> <div class="back-next"><span class="reg-next-button">Next</span></div> </div> </form> 

JQuery

  //clicking the next button hides this section and shows the next section jQuery('.project-details .reg-next-button').click(function() { // jQuery(".project-details").slideUp(); // jQuery('.project-address').slideDown(); jQuery('.reg-project-name').validate({ debug: true, rules: { projectName: "required" }, messages: { projectName: "Please give your project a name", } }); }); 

EDIT: tried to check one element as follows.

  jQuery('.project-details .reg-next-button').click(function() { // jQuery(".project-details").slideUp(); // jQuery('.project-funding').slideDown(); var validator = jQuery( ".wpcf7-form" ).validate(); validator.element( ".reg-project-name" ); }); 

EDIT: If I click the "Next" button, I need the form elements to be checked in this div before moving around which does not happen. those. form elements are not validated.

Any thoughts? Many thanks.

Answer 1

First, forget about the .validate() wrapper inside any click handlers ... it just doesn't work. One of the problems is that .validate() not a form validation method. Rather, .validate() is just a plugin initialization method in a form. You will do this once at page loading, since any subsequent .validate() calls .validate() ignored.

To test the form using the jQuery Validate plugin, you use the .valid() method , which starts the test and returns a boolean value.

When I create multi-stage forms, I use a unique set of <form> tags for each section.

Then I use .valid() to check the section before moving on to the next. (Remember to initialize the plugin first, call .validate() , on all forms in the DOM ready.)

Then in the last section, I use .serialize() for each form and concatenates them into a data request string to be submitted.

Something like that...

 $(document).ready(function() { $('#form1').validate({ // rules }); $('#form2').validate({ // rules }); $('#form3').validate({ // rules, submitHandler: function (form) { // serialize and join data for all forms // ajax submit return false; } }); $('#gotoStep2').on('click', function() { if ($('#form1').valid()) { // code to reveal step 2 } }); $('#gotoStep3').on('click', function() { if ($('#form2').valid()) { // code to reveal step 3 } }); // there is no third click handler since the plugin takes care of this with the // built-in submitHandler callback function on the last form. }); 

It is important to remember that my click handlers do not use the type="submit" buttons. These are regular buttons, either outside the form tags, or type="button" .

Only the button in the most recent form is a regular type="submit" button. This is because I use the submitHandler plugin's built-in callback function only in the most recent form.

"Proof of Concept" DEMO: http://jsfiddle.net/N9UpD/

Also see the link:

fooobar.com/questions/1498587 / ...

Answer 2

You can use the valid method to select the items you want to check.

Working example:

 // First, set up validator $('#projectForm').validate({ debug: true, rules: { projectName: "required" }, messages: { projectName: "Please give your project a name", } }); //clicking the next button hides the current section and shows the next section $('.project-details .reg-next-button').click(function() { // Get the form that this button lives in var form = $(this).closest("form"); // Get the validator object for the form var validator = form.data("validator"); // Get the section that we're currently validating. May need to modify this depending on the structure of your DOM var section = $(this).closest("div"); // Get all controls (input, textarea, select, etc) in the section var fields = section.find(":input"); if (fields.valid()){ console.log("Valid!"); // Hide this section... section.toggle(); // And show the next section section.next().toggle(); } }); 

 .project-address { display:none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script> <form id="projectForm"> <div class="project-details"> <h2>Project details</h2> <label>Project name: </label> <input type="text" class="reg-project-name" size="40" value="" name="projectName"> <br> <button type="button" class="reg-next-button">Next</button> </div> <div class="project-address"> <h2>Project address</h2> <label>Project address:</label><input type="text" class="reg-project-address" size="40" value="" name="projectAddress"> <br> <button class="reg-next-button">Next</button> </div> </form> 

See this code: http://codepen.io/alexweissman/pen/Wragog

Answer 3

it works in the form tag

in html set below structure

 <form class="project-details"> <h2>Project details</h2> <label>Project name: </label> <div class="back-next"><span class="reg-next-button">Next</span></div> </form> 

for demonstration see here