<form> HTML标记会阻止我的设计表单正常工作吗?

时间:2019-05-04 16:10:30

标签: html ruby-on-rails devise bootstrap-4

HTML标记阻止我的设备注册表单提交。

当我拿走标签时,一切都会按预期进行。没有出现错误。

        <form>
          <div class="form-group">
              <div class="row">
                <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
                  <%= render "devise/shared/error_messages", resource: resource %>
                  <div class="col-md-12">
                    <div class="field"
                      <%= f.label :username %>
                      <%= f.text_field :username, class: "form-control", placeholder: "Username" %>
                    </div>
                  </div>
                  <div class="col-md-12">
                    <div class="field">
                      <%= f.label :email %>
                      <%= f.email_field :email, autofocus: true, autocomplete: "email", class: "form-control", placeholder: "Email" %>
                    </div>
                  </div>
                  <div class="col-lg-6">
                    <div class="field">
                      <%= f.label :password %>
                      <% if @minimum_password_length %>
                      <em>(<%= @minimum_password_length %> characters minimum)</em>
                      <% end %><br />
                      <%= f.password_field :password, autocomplete: "new-password", class: "form-control", placeholder: "Password" %>
                    </div>
                  </div>
                  <div class="col-lg-6">
                    <div class="field">
                      <%= f.label :password_confirmation %><br />
                      <%= f.password_field :password_confirmation, autocomplete: "new-password", class: "form-control", placeholder: "Password Confirmation" %>
                    </div>
                  </div>

                  <div class="col-lg-12">
                    <div class="actions" style="padding-top: 2%">
                      <%= f.submit "Sign up", class: "site-btn btn-sm centered" %>
                    </div>
                  </div>
                <% end %>
              </div>
                <%= render "devise/shared/links" %>
          </div>
        </form>

我不知道我是否缺少一些愚蠢的东西,或者这是否是已知问题?请帮忙! :-)

2 个答案:

答案 0 :(得分:1)

您的代码中的</form>可能是问题所在。而且您不再需要<form>标记,因为Rails表单会在浏览器中生成html表单。

          <div class="form-group">
          <div class="row">
            <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
              <%= render "devise/shared/error_messages", resource: resource %>
              <div class="col-md-12">
                <div class="field"
                  <%= f.label :username %>
                  <%= f.text_field :username, class: "form-control", placeholder: "Username" %>
                </div>
              </div>
              <div class="col-md-12">
                <div class="field">
                  <%= f.label :email %>
                  <%= f.email_field :email, autofocus: true, autocomplete: "email", class: "form-control", placeholder: "Email" %>
                </div>
              </div>
              <div class="col-lg-6">
                <div class="field">
                  <%= f.label :password %>
                  <% if @minimum_password_length %>
                  <em>(<%= @minimum_password_length %> characters minimum)</em>
                  <% end %><br />
                  <%= f.password_field :password, autocomplete: "new-password", class: "form-control", placeholder: "Password" %>
                </div>
              </div>
              <div class="col-lg-6">
                <div class="field">
                  <%= f.label :password_confirmation %><br />
                  <%= f.password_field :password_confirmation, autocomplete: "new-password", class: "form-control", placeholder: "Password Confirmation" %>
                </div>
              </div>

              <div class="col-lg-12">
                <div class="actions" style="padding-top: 2%">
                  <%= f.submit "Sign up", class: "site-btn btn-sm centered" %>
                </div>
              </div>
            <% end %>
          </div>
            <%= render "devise/shared/links" %>
      </div>

答案 1 :(得分:1)

如果您查看浏览器中现在拥有的代码,则会看到您有两个表单标签。您放置了<form>的那个和Rails form_for...生成的一个。删除<form>标签,它将起作用。

如果您希望引导样式在Rails生成的表单上运行,我建议您使用simple_form_for gem http://simple-form-bootstrap.plataformatec.com.br/documentation

一开始要习惯它有点棘手,但效果很好:)