レールでマルチステップフォームを構築しています。jquery ルートに進み、jquery-steps プラグインを使用することにしました。フォームは 2 つの異なるフォームに分割されていません。フォームは 1 つのページにまとめられているだけです。jquery-steps プラグインは、ページに前と次のボタンを生成しています。bodyTag として fieldset を使用し、headerTag として h2 を使用しています。chrome 開発者ツールを使用して div で steps() を呼び出すと、ウィザード プラグインがロードされているようです。以下のコードはウィザードの div に多くの div を示していますが、それらを削除しても同じ問題が発生します。
<!--=== Content Part ===-->
<div class="container content">
<div class="row">
<script>
$(function ()
{
$("#wizard").steps({
headerTag: "h2",
bodyTag: "fieldset",
});
});
</script>
<div id="wizard">
<%= form_for @suppform, url: new_business_supp_form_path do |f| %>
<div class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<div class="reg-header">
<h2>Business Contact</h2>
<p>Enter the business's primary contact information</p>
</div>
<fieldset>
<div class="row">
<div class="col-sm-6">
<%= f.label :first_name %>
<%= f.text_field :first_name, :class => "form-control margin-bottom-20" %>
</div>
<div class="col-sm-6">
<%= f.label :last_name %>
<%= f.text_field :last_name, :class => "form-control margin-bottom-20" %>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<%= f.label :work_phone_number %>
<%= f.text_field :work_phone_number, :class => "form-control margin-bottom-20" %>
</div>
</div>
</fieldset>
<div class="reg-header">
<h2>Business Information</h2>
<p>Enter your business's information</p>
</div>
<fieldset>
<%= f.label :business_address %>
<%= f.text_field :business_address, :class => "form-control margin-bottom-20" %>
<div class="row">
<div class="col-sm-6">
<%= f.label :business_postal_code %>
<%= f.text_field :business_postal_code, :class => "form-control margin-bottom-20" %>
</div>
<div class="col-sm-6">
<%= f.label :business_city %>
<%= f.text_field :business_city, :class => "form-control margin-bottom-20" %>
</div>
</div>
<hr>
</fieldset>
</div>
<% end %>
</div>
</div>
</div><!--/container-->
<!--=== End Content Part ===-->