CODEWITHSUNDEEP
htmlruby-on-railsdevisebootstrap-4
Megan Ralph
Megan Ralph

Reputation: 1

<form> HTML tag stopping my devise form from working?

The HTML tag is stopping my devise sign up form from submitting.

When I take the tag away, everything works as intended. There are no errors appearing. 

        <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>

I don't know if I'm missing something silly or if this a known problem? Please help! :-)

Upvotes: 0

Views: 120

Answers (2)

Clara
Clara

Reputation: 2715

If you inspect the code you have right now in the browser, you will see that you have two form tags. The one you put with <form> and one generated by form_for... by Rails. Remove the <form> tag and it will work.

If you want bootstrap styles to work on the forms generated by Rails I recommend the simple_form_for gem http://simple-form-bootstrap.plataformatec.com.br/documentation

It is a bit tricky to get used to in the beginning, but it works fantastic :)

Upvotes: 1

Nsikan Sylvester
Nsikan Sylvester

Reputation: 618

the </form> down your code might be the problem. and you don't need the <form> tag anymore since rails form produces html form on the browser.

          <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>

Upvotes: 1

Related Questions