Cara Membuat Form Wizard (Tab) Validation Menggunakan JQuery-Steps dan JQuey Validation

Disclaimer lagi :

Ini merupakan catatan-catatan coding saya ketika menemukan masalah-masalah dalam melakukan coding. Mohon maaf jika artikel ini hanya seadanya.

Untuk membuat Form Wizard bisa menggunakan plugin JQuery Steps dengan validasi dari JQuery Validation:

Contoh link CDN JQuery Steps :

https://cdnjs.cloudflare.com/ajax/libs/jquery-steps/1.1.0/jquery.steps.min.js

Contoh link CDN JQuery Validation:

https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js

Tapi saya hanya menggunakan plugin dari template saya ya. Penjelasan ada di script coding-nya ya..

Selanjutnya buat contoh form-nya :

 <div id="circle-basic">  
   <form id="formTambah" method="POST" action="{{ route('pendaftaran.create') }}">  
   <h3>Keyboard</h3>  
   <section>  
     <div class="form-group">  
       <label>Alamat URL</label>  
       <input type="text" name="sistem" class="form-control" id="sistem" required>  
     </div>  
   </section>  
   <h3>Effects</h3>  
   <section>  
     <div class="form-group">  
       <label>Alamat URL</label>  
       <input type="text" name="url_sistem" class="form-control" id="url_sistem" required>  
     </div>  
   </section>  
   <h3>Pager</h3>  
   <section>  
     <div class="form-group">  
       <label>Alamat URL</label>  
       <input type="text" name="img_sistem" class="form-control" id="img_sistem" required>  
     </div>  
   </section>  
   </form>  
 </div>  

Kalo ini Script JS nya 

 <script>  
   //INISIASI JQUERY STEPS  
   $("#circle-basic").steps({  
     headerTag: "h3",  
     bodyTag: "section",  
     transitionEffect: "slideLeft",  
     autoFocus: true,  
     cssClass: 'circle wizard',   //ini style wizard yang saya pilih
     onStepChanging: function (event, currentIndex, newIndex)  // ketika tombol step diklik maka akan menjalankan fungsi didalamnya
     {  
       if (newIndex < currentIndex) {  
         return true;  
       }  
       form.validate().settings.ignore = ":disabled,:hidden";   
       return form.valid();  //cek validasi form
     },  
     onFinishing: function (event, currentIndex)
     {  
       form.validate().settings.ignore = ":dsabled";  
       return form.valid(); 
     },  
     onFinished: function (event, currentIndex) //jika tombol finish diklik maka fungsi yang akan dijalankan didalam ini ya
     {  
       var form = $('#formTambah');   
       form.submit();  
     }  
   });  
   //VALIDASI FROM NYA  
   $(document).ready(function() {  
     $('#formTambah').validate({  
       ignore: ':not(select:hidden, input:visible, textarea:visible)', //ini digunakan agar error pada select tidak merusak tampilan sehingga error pada input select di-TIADAKAN  
       rules: {  
         // nama_sistem = "required", -> jika akan menambahkan kondisi tertentu pada inputan misal jika inputan nama_sistem bernilai required  
       },  
       messages: {  
         // nama_sistem = "harus diisi ya gaes", -> menampilkan pesan yang akan ditampilkan pada error  
       },  
       errorElement: 'div', //nah, kalo ini untuk menampilkan pesan error pada div  
       errorClass: 'errorx', // ini kelas div yang digunakan  
       errorPlacement: function (error, element) {  
         if ($(element).is('select')) {  
           element.next().after(error);  
         } else {  
           error.insertAfter(element);  
         }  
       }  
     });  
   });  
 </script>  

Ini class css untuk menampilkan error :

   <style>    
     .errorx{  
       font-weight: bold;  
       font-size: 90%;  
       color: #dc3545;  
     }  
   </style>  

Terimakasih.