Multi step form with jquery issues - navigation buttons are not working

Multi step form with jquery issues - navigation buttons are not working

Im trying to use the jquery steps plugin to have a multi step form. I just copy the available example code on the documentation and made some html and css changes and the form is working now like this: " https://jsfiddle.net/hyuzhytj/5/".


But it has 3 issues:

- The navigation buttons next and previous don't work.
- In the first step, there are many form fields and the last fields, for example, the field with id="notes" don't appear, it seems that it's hidden.
- I'm also using the select2 plugin in this page and in this field it is appearing a small rectangle in the input and I'm not understanding why.

Do you know how to fix this?

Note: With this plugin, each step title is inside a `<h3>` element and the form fields inside each step content are inside a `<fieldset>` elementa.


**HTML:**



  1.     <div class="container nopadding py-4">
  2.       <div class="row justify-content-center align-items-center">
  3.         <div class="col-12">
  4.           <h1 class="h5 text-center text-heading-blue font-weight-bold">Title</h1>
  5.         </div>
  6.       </div>
  7.     
  8.       <div class="row mt-3 d-flex justify-content-center">
  9.         <div class="col-12">
  10.           <form id="example-advanced-form" action="#"> 
  11.             <h3 class="d-none d-md-block">Step 1</h3>
  12.             <fieldset>
  13.               <div class="form-group">
  14.                 <label for="conference_name" class="text-heading h6 font-weight-semi-bold">Conference Name *</label>
  15.                 <input class="form-control" id="conference_name" name="conference_name" type="text" class="required">
  16.               </div>
  17.     
  18.               <div class="form-group col-md-6 px-0">
  19.                 <label for="conference_categories" class="text-heading h6 font-weight-semi-bold">Conference categories *</label>
  20.                 <select id="tag_list"  multiple class="form-control required" name="conference_categories" id="conference_categories">
  21.                   <option>category</option>
  22.                   <option>category2</option>
  23.                 </select>
  24.               </div>
  25.     
  26.               <div class="form-group">
  27.                 <label class="text-heading h6 font-weight-semi-bold">Address</label>
  28.                 <div class="form-row">
  29.                   <div class="col">
  30.                     <input type="text" name="conference_city" class="form-control required">
  31.                   </div>
  32.                   <div class="col">
  33.                     <input type="text" name="conference_zip_code" class="form-control required">
  34.                   </div>
  35.                 </div>
  36.               </div>
  37.               <div class="form-row">
  38.                 <div class="form-group col">
  39.                   <input type="text" required name="conference_address" class="form-control">
  40.                 </div>
  41.               </div>
  42.               <div class="form-row">
  43.                 <div class="form-group col">
  44.                   <input type="text" required name="conference_place" class="form-control">
  45.                 </div>
  46.               </div>
  47.     
  48.               <div class="form-row">
  49.                 <div class="form-group col col-lg-6">
  50.                   <label for="conference_image" class="text-heading h6 font-weight-semi-bold">Conference Image</label>
  51.                   <label class="conference_image">
  52.                     <input type="file" required id="conference_image" name="conference_image" class="custom-file-input">
  53.                     <span class="custom-file-control"></span>
  54.                   </label>
  55.                 </div>
  56.               </div>
  57.     
  58.               <div class="form-group">
  59.                 <label for="conference_description" class="text-heading h6 font-weight-semi-bold">Description</label>
  60.                 <textarea class="form-control" id="textarea" name="conference_description" class="required"></textarea>
  61.               </div>
  62.               
  63.              <div class="form-group">
  64.                 <label for="notes" class="text-heading h6 font-weight-semi-bold">Notes</label>
  65.                 <input class="form-control" id="notes" name="notes" type="text" class="required">
  66.               </div>
  67.             </fieldset>
  68.     
  69.             <h3>Step 2</h3>
  70.             <fieldset>
  71.               <p> Step 2 content</p>
  72.             </fieldset>
  73.     
  74.             <h3>Step 3</h3>
  75.             <fieldset>
  76.               <p>Step 3 content</p>
  77.             </fieldset>
  78.     
  79.           </form>
  80.         </div>
  81.       </div>
  82.     </div>






**jquery**:

     // select2
   

  1.       $('#tag_list').select2({
  2.       placeholder: '',
  3.       dropdownAutoWidth: 'true',
  4.       width: '100%'
  5.     });

  
    // jquery steps

  1.        var form = $("#example-advanced-form").show();
  2.     
  3.     form.steps({
  4.       headerTag: "h3",
  5.       bodyTag: "fieldset",
  6.       transitionEffect: "slideLeft",
  7.       onStepChanging: function (event, currentIndex, newIndex)
  8.       {
  9.         // Allways allow previous action even if the current form is not valid!
  10.         if (currentIndex > newIndex)
  11.         {
  12.           return true;
  13.         }
  14.         // Forbid next action on "Warning" step if the user is to young
  15.         if (newIndex === 3 && Number($("#age-2").val()) < 18)
  16.         {
  17.           return false;
  18.         }
  19.         // Needed in some cases if the user went back (clean up)
  20.         if (currentIndex < newIndex)
  21.         {
  22.           // To remove error styles
  23.           form.find(".body:eq(" + newIndex + ") label.error").remove();
  24.           form.find(".body:eq(" + newIndex + ") .error").removeClass("error");
  25.         }
  26.         form.validate().settings.ignore = ":disabled,:hidden";
  27.         return form.valid();
  28.       },
  29.       onStepChanged: function (event, currentIndex, priorIndex)
  30.       {
  31.         // Used to skip the "Warning" step if the user is old enough.
  32.         if (currentIndex === 2 && Number($("#age-2").val()) >= 18)
  33.         {
  34.           form.steps("next");
  35.         }
  36.         // Used to skip the "Warning" step if the user is old enough and wants to the previous step.
  37.         if (currentIndex === 2 && priorIndex === 3)
  38.         {
  39.           form.steps("previous");
  40.         }
  41.       },
  42.       onFinishing: function (event, currentIndex)
  43.       {
  44.         form.validate().settings.ignore = ":disabled";
  45.         return form.valid();
  46.       },
  47.       onFinished: function (event, currentIndex)
  48.       {
  49.         alert("Submitted!");
  50.       }
  51.     }).validate({
  52.       errorPlacement: function errorPlacement(error, element) { element.before(error); },
  53.       rules: {
  54.         confirm: {
  55.           equalTo: "#password-2"
  56.         }
  57.       }
  58.     });
        
CSS:

The css is a bit large, so I just put it in the fiddle, first there is the css for the jquery steps, and then the css for the select2 plugin.