想要为使用devise gem构建的注册表单构建一个多步骤表单

时间:2015-05-13 07:59:26

标签: ruby-on-rails

我使用设计生成注册/注册表单。但是我的注册表有许多字段,我想用它来制作多步形式。 第一步是接受电子邮件密码。当用户输入时,他们可以继续填写其他表格。

    <h2>Sign up</h2>

<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
    <%= devise_error_messages! %>

    <div class="field">
      <%= f.label :first_name %><br />
      <%= f.text_field :first_name, autofocus: true %>
    </div>

    <div class="field">
      <%= f.label :last_name %><br />
      <%= f.text_field :last_name %></br>
    </div>

    <div class="field">
      <%= f.label :birth_date %></br>

      <%= f.date_select :birth_date, :start_year=>1905,:end_year=>2015 %>
    </div>

    <div class="field">
      <%= f.label :city %></br>
      <%= f.text_field :city %>
    </div>

    <div class="field">
      <%= f.label :address %></br>
      <%= f.text_area :address %>
    </div>

    <div class="field">

        <%= f.label :country %></br>
        <%= f.select(:country, [['India', 'India'], ['USA', 'USA']]) %>
    </div>

    <div class="field">
      <%= f.label :zip_code %></br>
      <%= f.text_field :zip_code %>
    </div>

    <div class="field">
      <%= f.label :gender %></br>
      <span class="option">Male</span><%= f.radio_button :gender, "m" %>
      <span class="option">Female</span><%= f.radio_button :gender, "f" %></br>
    </div>

    <div class="field">
      <%= f.label :mobile_no %></br>
      <%= f.telephone_field :mobile_no %>
    </div>

    <div class="field">
      <%= f.label :website %></br>
      <%= f.url_field :website %>
    </div>

    <div class="field">
      <%= f.label :email %><br />
      <%= f.email_field :email %>
    </div>

    <div class="field">
      <%= f.label :password %>
      <% if @validatable %>
          <em>(<%= @minimum_password_length %> characters minimum)</em>
      <% end %><br />
      <%= f.password_field :password, autocomplete: "off" %>
    </div>

    <div class="field">
      <%= f.label :password_confirmation %><br />
      <%= f.password_field :password_confirmation, autocomplete: "off" %>
    </div>

    <div class="field">
      <%= f.label :Launguages_Known %><br />
      <%= f.text_field :language %>
    </div>

    <div class="field">
      <%= f.label :skills %><br />
      <%= f.text_field :skills %>
    </div>

    <div class="field">
      <%= f.label :passion %><br />
      <%= f.text_field :passion %>
    </div>

    <div class="field">
      <%= f.label :connecting_conditions %><br />
      <%= f.text_area :connect_pref %>
    </div>


    <div class="actions">
      <%= f.submit "Sign up" %>
    </div>
<% end %>

这个形式很长,所以我想把它变成多步。 在成功填写此表单后,应将用户重定向到特定页面。

成功注册后,需要帮助为注册页面生成多步骤表单并重定向到状态页面。

3 个答案:

答案 0 :(得分:4)

如果您想逐步提交表单,请完成以下操作:

https://github.com/aasm/aasm

假设您想通过以下三个步骤提交表单:

profile_details

address_details

technical_details

首先,你需要在你的模态中定义横断面状态,如

 aasm do
    state :loaded, :initial => true
    state :profile_details
    state :address_details
    state :technical_details

  event :fill_basic_info do
    transitions :from => :loaded, :to => :profile_details, :guard => Proc.new { |o|
    o.valid?
  }
  end

  event :fill_residential do
    transitions :from => :profile_details, :to => :address_details
  end

  event :fill_skills do
    transitions :from => :address_details , :to => :technical_details
  end

  event :previous_step do
    transitions :from => :technical_details, :to => :address_details
    transitions :from => :address_details , :to => :profile_details
    transitions :from => :profile_details, :to => :loaded
  end
 end

def change_ad_next_state
   case self.aasm_state
   when "loaded"
    fill_basic_info
   when "profile_details"
    fill_residential
   when "address_details"
    fill_skills
   end
 end

在你的控制器上:

def create
  @user = User.new(user_params)

 if @user.select_tenant && @user.save
   redirect_to edit_user_path(@user)
 else
   @user.previous_step
   render "new"
 end
end

def update
  @user = User.find params[:id]
  if @user.change_ad_next_state &&    @user.update_attributes(advertisement_params)
    redirect_to some_path_here and return
  else
    @user.previous_step
    render "edit"  and return
  end
end

def previous_step
  @user = User.find(params[:id])
  if !@user.loaded? && @user.previous_step && @user.save
    redirect_to edit_user_path(@user)
  else
    redirect_to :back
  end
end

private 

 def user_params
   params.require(:user).permit(:first_name,:last_name,:email,:password  etc....)
 end

并定义所有方法的路线,如果您没有定义。

答案 1 :(得分:1)

我建议使用wicked gem。简约而有用

答案 2 :(得分:0)

首先,您只需提交电子邮件和密码并提交即可。

<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
    <%= devise_error_messages! %>

    <div class="field">
      <%= f.label :email %><br />
      <%= f.text_field :email, autofocus: true %>
    </div>
    <div class="field">
      <%= f.label :password %><br />
      <%= f.password_field :password %>
    </div>
    <div class="field">
      <%= f.label :password_confirmation %><br />
      <%= f.password_field :password_confirmation %>
    </div>
    <div class="actions">
      <%= f.submit "Sign up" %>
    </div>
<% end %>

成功注册后,您应该将用户重定向到编辑页面。并更新编辑页面上的其他字段 在ApplicationController中编写以下代码。

def after_sign_up_path_for(resource)
    redirect_to edit_user_path(resource)
end