<form> HTML 标签阻止我的设计表单工作？答案

【问题标题】：<form> HTML tag stopping my devise form from working?<form> HTML 标签阻止我的设计表单工作？
【发布时间】：2019-05-04 16:10:29
【问题描述】：

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>

我不知道我是否遗漏了一些愚蠢的东西，或者这是一个已知问题？请帮忙！ :-)

【问题讨论】：

你在说什么
标签？ form_for生成的那个？这是 Devise 创建的标准视图吗？究竟是什么问题？
@bo-oz 我包含的代码顶部的
标签。问题是当

存在时我的表单不会提交，但我需要

标签才能使引导样式工作:(
@MeganRalph 我建议使用该信息编辑您的问题（它不会提交，以及您指的是哪个表单标签）。这将使人们更容易回答。
您不能嵌套 FORM 标签，将 .form-group 和 .row div 移动到 form_for 块内。

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

【解决方案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>

【讨论】：

【解决方案2】：

如果您现在在浏览器中检查代码，您将看到您有两个表单标签。您使用<form> 放置的一个和Rails 由form_for... 生成的一个。去掉<form>标签就可以了。

如果您希望引导样式适用于 Rails 生成的表单，我推荐 simple_form_for gem http://simple-form-bootstrap.plataformatec.com.br/documentation

刚开始习惯有点棘手，但效果很好:)

【讨论】：