我多步驟的形式沒有得到驗證

Question

我試圖用引導驗證方法來驗證我的多步驟的形式，但面臨的一個奇怪的錯誤

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

我GOOGLE了它很多次，但沒有找到解決方案，可以理清我的問題。

實際上錯在哪裏？

的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

你有沒有試過title屬性添加到您的狀態定義？

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