私のマルチステップフォームは、私はそれを何度もGoogleで検索できますが、解決策を見つけることができませんでした

Question

私は、ブートストラップ検証メソッドを使用して、私のマルチステップフォームを検証しようとしているが、奇妙なエラー

Uncaught Error: One or more corresponding step titles are missing. 

に直面しています検証し得ていません私の問題を整理してください。

実際に間違いはどこですか？

Script.js

$(document).ready(function() { 
    function adjustIframeHeight() { 
     var $body = $('body'), 
      $iframe = $body.data('iframe.fv'); 
     if ($iframe) { 
      // Adjust the height of iframe 
      $iframe.height($body.height()); 
     } 
    } 
    $("#profile_form").steps({ 
     headerTag: "h4", 
     bodyTag: "fieldset", 
     saveState: true, 
     onStepChanged: function(e, currentIndex, priorIndex) { 
       // You don't need to care about it 
       // It is for the specific demo 
       adjustIframeHeight(); 
      }, 
      // Triggered when clicking the Previous/Next buttons 
      onStepChanging: function(e, currentIndex, newIndex) { 
       var fv   = $('#profile_form').data('formValidation'), // FormValidation instance 
        // The current step container 
        $container = $('#profile_form').find('fieldset[data-step="' + currentIndex +'"]'); 

       // Validate the container 
       fv.validateContainer($container); 

       var isValidStep = fv.isValidContainer($container); 
       if (isValidStep === false || isValidStep === null) { 
        // Do not jump to the next step 
        return false; 
       } 

       return true; 
      }, 
      // Triggered when clicking the Finish button 
      onFinishing: function(e, currentIndex) { 
       var fv   = $('#profile_form').data('formValidation'), 
        $container = $('#profile_form').find('fieldset[data-step="' + currentIndex +'"]'); 

       // Validate the last step container 
       fv.validateContainer($container); 

       var isValidStep = fv.isValidContainer($container); 
       if (isValidStep === false || isValidStep === null) { 
        return false; 
       } 

       return true; 
      }, 
      onFinished: function(e, currentIndex) { 
       // Uncomment the following line to submit the form using the defaultSubmit() method 
       //$('#multiphase').formValidation('defaultSubmit'); 

       // For testing purpose 
       // $('#welcomeModal').modal("show"); 
      } 
     }).formValidation({ 
     excluded: ':disabled', 
     message: 'This value is not valid', 
     container: 'tooltip', 
     feedbackIcons: { 
      valid: 'glyphicon glyphicon-ok', 
      invalid: 'glyphicon glyphicon-remove', 
      validating: 'glyphicon glyphicon-refresh' 
     }, 
     fields: {..................} 
...................... 

HTML

     <form id="profile_form" role="form" action="" method="post" class="form-inline"> 

          <fieldset data-step="0"> 
<h4>Introduction <span class="step">(Step 1/7)</span></h4> 
<div class="form-group"> 
    <label for="first-name">First Name:</label><br> 
    <input type="text" name="firstname" class="first-name form-control" id="first-name"> 
</div> 
<div class="form-group"> 
    <label for="last-name">Last Name:</label><br> 
    <input type="text" name="last-name" class="last-name form-control" id="last-name"> 
</div> 
<div class="form-group"> 
    <label for="height">Height:</label><br> 
    <input type="text" name="height" class="height form-control" id="height"> 
</div> 
<div class="form-group"> 
    <label for="weight">Weight:</label><br> 
    <input type="text" name="weight" class="weight form-control" id="weight"> 
</div> 
<br> 
<button type="button" class="btn btn-next">Next <i class="fa fa-angle-right"></i></button> 
</fieldset> 

<fieldset data-step="1"> 
<h4>Place and Date of Birth <span class="step">(Step 2/7)</span></h4> 
<div class="form-group"> 
    <label for="birth-city">City:</label><br> 
    <input type="text" name="birth-city" class="birth-city form-control" id="birth-city"> 
</div> 
<div class="form-group"> 
    <label for="birth-state">State/Province:</label><br> 
    <input type="text" name="birth-state" class="birth-state form-control" id="birth-state"> 
</div> 
<div class="form-group"> 
    <label for="birth-country">Country:</label><br> 
    <input type="text" name="birth-country" class="birth-country form-control" id="birth-country"> 
</div> 
<div class="form-group"> 
    <label for="birth-date">Date (YYYY/MM/DD):</label><br> 
    <input type="text" name="birth-date" class="birth-date form-control" id="birth-date"> 
</div> 
<br> 
<button type="button" class="btn btn-previous"><i class="fa fa-angle-left"></i> Previous</button> 
<button type="button" class="btn btn-next">Next <i class="fa fa-angle-right"></i></button> 
          </fieldset> 

         </form 

>

Answer 1

あなたの状態の定義にタイトルプロパティを追加しようとしたことがありますか？

$("#profile_form").steps({ 
    headerTag: "h4", 
    title: "profile details". 
    bodyTag: "fieldset", 
    saveState: true...