I´m creating a multi-step form using bootstrap and jquery with 4 steps. 

But I want that in each step validate the required fields, that is, the button to go to the next step should only work if the required fields are not empty.

But I´m not having success implementing this part of validating each step the required fields. Do you know how to do that?

Working example: https://jsfiddle.net/4vzf9qgr/2/

Jquery:

1.     $(function(){
2.      
3.       // navigation buttons
4.       
5.       $('a.nav-link').on('show.bs.tab', function (e) {
6.         var $target = $(e.target);
7.         if ($target.parent().hasClass('disabled')) {
8.           e.preventDefault();
9.         }
10.       });
11.     
12.       $(".next-step").click(function (e) {
13.         var $active = $('.nav-pills li a.active');
14.         $active.parent().next().removeClass('disabled');
15.         nextTab($active);
16.       });
17.     
18.       $(".prev-step").click(function (e) {
19.         var $active = $('.nav-pills li a.active');
20.         prevTab($active);
21.       });
22.     
23.       function nextTab(elem) {
24.         $(elem).parent().next().find('a.nav-link').click();
25.       }
26.       function prevTab(elem) {
27.         $(elem).parent().prev().find('a.nav-link').click();
28.       }
29.     });

HTML

1.     <div class="bg-light-gray2">
2.       <div class="container nopadding py-4">
3.         <div class="row justify-content-center align-items-center">
4.           <div class="col-12">
5.             <h1 class="h5 text-center text-heading-blue font-weight-bold">Page Title</h1>
6.           </div>
7.         </div>
8.     
9.         <div class="row mt-3 d-flex justify-content-center">
10.           <div class="col-12">
11.             <div class="registration_form">
12.               <ul class="nav nav-pills bg-light-gray registration_form_list" role="tablist">
13.                 <li class="">
14.                   <a class="nav-link active" href="#step1" data-toggle="tab" role="tab">
15.                     Step 1<br><small class="d-none d-md-inline-block">General Info</small></a>
16.                 </li>
17.                 <li class="disabled">
18.                   <a class="nav-link" href="#step2" data-toggle="tab" role="tab">
19.                     Step 2<br><small class="d-none d-md-inline-block">Conference Creator Info</small></a>
20.                 </li>
21.                 <li class="disabled">
22.                   <a class="nav-link" href="#step3" data-toggle="tab" role="tab">
23.                     Step 3<br><small class="d-none d-md-inline-block">Registration Types</small></a>
24.                 </li>
25.               </ul>
26.     
27.               <form method="post" name="test" class="clearfix" action="/conference/store">
28.                 <div class="tab-content registration_body bg-white" id="myTabContent">
29.                   <div class="tab-pane fade show active clearfix" id="step1" role="tabpanel" aria-labelledby="home-tab">
30.                    
31.                     <div class="form-group">
32.                       <label for="conference_name" class="text-heading h6 font-weight-semi-bold">Conference Name</label>
33.                       <input type="text" required class="form-control" name="conference_name" id="conference_name">
34.                     </div>
35.     
36.                     <div class="form-row">
37.                       <div class="form-group col-lg-6">
38.                         <label for="conference_categories" class="text-heading h6 font-weight-semi-bold">Categories</label>
39.                         <select id="tag_list"  multiple class="form-control" name="conference_categories" id="conference_categories">
40.                           <option>category1</option>
41.                           <option>category2</option>
42.                         </select>
43.                       </div>
44.                     </div>
45.     
46.                     
47.     
48.                     <div class="form-group">
49.                       <label for="textarea" class="text-heading h6 font-weight-semi-bold">Description</label>
50.                       <textarea class="form-control" name="conference_description" id="textarea" rows="3"></textarea>
51.                     </div>
52.     
53.                     <div class="float-right">
54.                       <button type="button" href="#step2" data-toggle="tab" role="tab"
55.                               class="btn mr-2 btn-primary btn next-step">
56.                         Go To Step 2
57.                       </button>
58.                     </div>
59.     
60.                   </div>
61.     
62.                   <div class="tab-pane fade clearfix" id="step2" role="tabpanel" aria-labelledby="profile-tab">
63.     
64.                     
65.                     <div class="form-group">
66.                       <label for="conference_organizer_description" class="text-heading h6 font-weight-semi-bold">Description</label>
67.                       <textarea name="organizer_description" id="conference_organizer_description" class="form-control" rows="3"></textarea>
68.                     </div>
69.     
70.                     <button type="button" href="#step1" data-toggle="tab" role="tab"
71.                             class="btn mr-2 btn-outline-primary btn prev-step">
72.                       Back to Step 1
73.                     </button>
74.                     <button type="button" href="#step3" data-toggle="tab" role="tab"
75.                             class="btn mr-2 btn-primary btn next-step">
76.                       Go To Step 3
77.                     </button>
78.                   </div>
79.                   <div class="tab-pane clearfix fade" id="step3" role="tabpanel" aria-labelledby="contact-tab">
80.                     <div class="form-group">
81.                       <label for="registration_type_name" class="text-heading h6 font-weight-semi-bold">Registration Type Name</label>
82.                       <input type="text" required class="form-control" name="registration_type_name" id="registration_type_name">
83.                     </div>
84.     
85.                     <div class="form-group">
86.                       <label for="registration_type_description" class="text-heading h6 font-weight-semi-bold">Registration Type Description</label>
87.                       <input type="text" class="form-control" name="registration_type_description" id="registration_type_description">
88.                     </div>
89.     
90.                     <button type="button" href="#step2" data-toggle="tab" role="tab"
91.                             class="btn mr-2 btn-outline-primary btn prev-step">
92.                       Go Back To Step 2
93.                     </button>
94.                     <button type="submit"
95.                             class="btn mr-2 btn-primary btn">
96.                       Store
97.                     </button>
98.     
99.                   </div>
100.                 </div>
101.               </form>
102.             </div>
103.           </div>
104.         </div>
105.       </div>
106.     </div>