应用错误收集

form_for在bootstrap 3 form-horizontal form-group任务中不起作用

时间：2015-04-21 13:46:38

标签： twitter-bootstrap ruby-on-rails-4

我只是构建了这个注册屏幕页面，并且发生了一些奇怪的事情。如果我将整个内容放在<form class="form-horizontal"> <div class="form-group">中，则单击提交按钮时数据不会写入数据库。如果我删除标签，它将正确保存输入，但页面的布局分崩离析。有关如何解决此问题并保留当前页面布局的任何见解？

这是html：

<div class="col-xs-4 col-xs-offset-4">
    <h1>Registracija</h1><br />
</div>

<form class="form-horizontal">
    <div class="form-group">

        <%= form_for @user do |f| %>

        <% if @user.errors.any? %>
        <div class="error_messages">
            <h2>Form is invalid</h2>
            <ul>
                <% for message in @user.errors.full_messages %>
                <li><%= message %></li>
                <% end %>
            </ul>
        </div>
        <% end %>

        <div class="col-xs-12">
            <%= f.label :name, 'Ime:', class:'control-label col-xs-3 col-xs-offset-1' %>
            <div class="col-xs-4 ">
            <%= f.text_field :name, class:'form-control', placeholder:'Janez' %>
            </div>
        </div>

        <div class="col-xs-12">
            <%= f.label :surname, 'Priimek:', class:'control-label col-xs-3 col-xs-offset-1' %>
            <div class="col-xs-4">
            <%= f.text_field :surname, class:'form-control', placeholder:'Novak' %>
            <br />
            </div>
        </div>

        <div class="col-xs-12">
            <%= f.label :email, 'e-pošta:', class:'control-label col-xs-3 col-xs-offset-1' %>
            <div class="col-xs-4">
            <%= f.text_field :email, class:'form-control', placeholder:'JanezNovak@gmail.com' %><br />
            </div>
        </div>

        <div class="col-xs-12">
            <%= f.label :password, 'Geslo:', class:'control-label col-xs-3 col-xs-offset-1' %>
            <div class="col-xs-4">
            <%= f.password_field :password, class:'form-control' %>
            </div>
        </div>

        <div class="col-xs-12">
            <%= f.label :password_confirmation, 'Potrditev gesla:', class:'control-label col-xs-3 col-xs-offset-1' %>
            <div class="col-xs-4">
            <%= f.password_field :password_confirmation, class:'form-control' %><br />
            </div>
        </div>

        <div class="col-xs-12">
            <div class="col-xs-4 col-xs-offset-4 right">
            <%= f.check_box :TOS %>
            <%= f.label :TOS, "Strinjam se s pogoji uporabe" %>
            </div>
        </div>

        <div class="col-xs-12">
            <div class="col-xs-2 col-xs-offset-6 right">
            <br />
            <%= f.submit 'Registracija', class:'btn btn-success' %>
            </div>
            <% end %>
        </div>

    </div>

</form>

渲染html：

<!DOCTYPE html>
<html>
<head>
  <title>Listek</title>
  <link rel="stylesheet" media="all" href="/assets/bootstrap.self-25c80f7bc7170da1038121bbb9cd02a65afb7cc84ed9a0d6ac9808f20d11fe29.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/notes.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/sessions.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/users.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/application.self-0fce5c189edf0ea1bbbb90f4f5d529c4963a4798791d323053cffccf15aa17e4.css?body=1" data-turbolinks-track="true" />
  <script src="/assets/jquery.self-d03a5518f45df77341bdbe6201ba3bfa547ebba8ed64f0ea56bfa5f96ea7c074.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/jquery_ujs.self-8e98a7a072a6cee1372d19fff9ff3e6aa1e39a37d89d6f06861637d061113ee7.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/turbolinks.self-c37727e9bd6b2735da5c311aa83fead54ed0be6cc8bd9a65309e9c5abe2cbfff.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/bootstrap.min.self-d66e555f160df017adf1ca16a36cd609a36d49c51637e365c5b8847d0065fa40.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/notes.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/sessions.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/users.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/application.self-3b8dabdc891efe46b9a144b400ad69e37d7e5876bdc39dee783419a69d7ca819.js?body=1" data-turbolinks-track="true"></script>
  <meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="focr4sBUuohauw2QbZhVJvgWeTF3TEgYfgXHAhiE0H5aPNb9+KORetdrWc01q0UcX00f559pnEvAHuruUhDpLg==" />
</head>
<body>

<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
    <div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul class="nav navbar-nav navbar-right">
            <li> 
                <a href="/sessions/new">Prijava</a>
            </li>
        </ul>
    </div>
</nav>

<div class="container">
<div class="col-xs-4 col-xs-offset-4">
    <h1>Registracija</h1><br />
</div>

<form class="form-horizontal">
    <div class="form-group">

        <form class="new_user" id="new_user" action="/users" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="authenticity_token" value="x4s832oFTuRweY8rTE4ZMIHczfHYmlhHiafzrs01EXjjMMHAUvJlFv2p23YUfQkKJoerJzC/jBQ3vN5Ch6EoKA==" />


        <div class="col-xs-12">
            <label class="control-label col-xs-3 col-xs-offset-1" for="user_name">Ime:</label>
            <div class="col-xs-4 ">
            <input class="form-control" placeholder="Janez" type="text" name="user[name]" id="user_name" />
            </div>
        </div>

        <div class="col-xs-12">
            <label class="control-label col-xs-3 col-xs-offset-1" for="user_surname">Priimek:</label>
            <div class="col-xs-4">
            <input class="form-control" placeholder="Novak" type="text" name="user[surname]" id="user_surname" />
            <br />
            </div>
        </div>

        <div class="col-xs-12">
            <label class="control-label col-xs-3 col-xs-offset-1" for="user_email">e-pošta:</label>
            <div class="col-xs-4">
            <input class="form-control" placeholder="JanezNovak@gmail.com" type="text" name="user[email]" id="user_email" /><br />
            </div>
        </div>

        <div class="col-xs-12">
            <label class="control-label col-xs-3 col-xs-offset-1" for="user_password">Geslo:</label>
            <div class="col-xs-4">
            <input class="form-control" type="password" name="user[password]" id="user_password" />
            </div>
        </div>

        <div class="col-xs-12">
            <label class="control-label col-xs-3 col-xs-offset-1" for="user_password_confirmation">Potrditev gesla:</label>
            <div class="col-xs-4">
            <input class="form-control" type="password" name="user[password_confirmation]" id="user_password_confirmation" /><br />
            </div>
        </div>

        <div class="col-xs-12">
            <div class="col-xs-4 col-xs-offset-4 right">
            <input name="user[TOS]" type="hidden" value="0" /><input type="checkbox" value="1" name="user[TOS]" id="user_TOS" />
            <label for="user_TOS">Strinjam se s pogoji uporabe</label>
            </div>
        </div>

        <div class="col-xs-12">
            <div class="col-xs-2 col-xs-offset-6 right">
            <br />
            <input type="submit" name="commit" value="Registracija" class="btn btn-success" />
            </div>
</form>     </div>

    </div>
</form>
</div>

</body>
</html>

1 个答案:

答案 0 :(得分：1)

你的结构有点奇怪，但试试这个：

<%= form_for @user do |f| %>
<div class="form-horizontal">
    <div class="form-group">
        <% if @user.errors.any? %>
        <div class="error_messages">
            <h2>Form is invalid</h2>
            <ul>
                <% for message in @user.errors.full_messages %>
                <li><%= message %></li>
                <% end %>
            </ul>
        </div>
        <% end %>

        <div class="col-xs-12">
            <%= f.label :name, 'Ime:', class:'control-label col-xs-3 col-xs-offset-1' %>
            <div class="col-xs-4 ">
                <%= f.text_field :name, class:'form-control', placeholder:'Janez' %>
            </div>
        </div>

        <div class="col-xs-12">
            <%= f.label :surname, 'Priimek:', class:'control-label col-xs-3 col-xs-offset-1' %>
            <div class="col-xs-4">
                <%= f.text_field :surname, class:'form-control', placeholder:'Novak' %>
            <br />
            </div>
        </div>

        <div class="col-xs-12">
            <%= f.label :email, 'e-pošta:', class:'control-label col-xs-3 col-xs-offset-1' %>
            <div class="col-xs-4">
                <%= f.text_field :email, class:'form-control', placeholder:'JanezNovak@gmail.com' %><br />
            </div>
        </div>

        <div class="col-xs-12">
            <%= f.label :password, 'Geslo:', class:'control-label col-xs-3 col-xs-offset-1' %>
            <div class="col-xs-4">
                <%= f.password_field :password, class:'form-control' %>
            </div>
        </div>

        <div class="col-xs-12">
            <%= f.label :password_confirmation, 'Potrditev gesla:', class:'control-label col-xs-3 col-xs-offset-1' %>
            <div class="col-xs-4">
                <%= f.password_field :password_confirmation, class:'form-control' %><br />
            </div>
        </div>

        <div class="col-xs-12">
            <div class="col-xs-4 col-xs-offset-4 right">
                <%= f.check_box :TOS %>
            <%= f.label :TOS, "Strinjam se s pogoji uporabe" %>
            </div>
        </div>

        <div class="col-xs-12">
            <div class="col-xs-2 col-xs-offset-6 right">
                <br />
                <%= f.submit 'Registracija', class:'btn btn-success' %>
            </div>
        </div>

    </div>
</div>
<% end %>

或者更好，这个，表格组位于正确的位置：

<%= form_for @user do |f| %>
<div class="form-horizontal">

    <% if @user.errors.any? %>
    <div class="form-group">
        <div class="error_messages">
            <h2>Form is invalid</h2>
            <ul>
                <% for message in @user.errors.full_messages %>
                <li><%= message %></li>
                <% end %>
            </ul>
        </div>
    </div>
    <% end %>

    <div class="form-group">
        <%= f.label :name, 'Ime:', class:'control-label col-xs-3 col-xs-offset-1' %>
        <div class="col-xs-4 ">
            <%= f.text_field :name, class:'form-control', placeholder:'Janez' %>
        </div>
    </div>

    <div class="form-group">
        <%= f.label :surname, 'Priimek:', class:'control-label col-xs-3 col-xs-offset-1' %>
        <div class="col-xs-4">
            <%= f.text_field :surname, class:'form-control', placeholder:'Novak' %>
        <br />
        </div>
    </div>

    <div class="form-group">
        <%= f.label :email, 'e-pošta:', class:'control-label col-xs-3 col-xs-offset-1' %>
        <div class="col-xs-4">
            <%= f.text_field :email, class:'form-control', placeholder:'JanezNovak@gmail.com' %><br />
        </div>
    </div>

    <div class="form-group">
        <%= f.label :password, 'Geslo:', class:'control-label col-xs-3 col-xs-offset-1' %>
        <div class="col-xs-4">
            <%= f.password_field :password, class:'form-control' %>
        </div>
    </div>

    <div class="form-group">
        <%= f.label :password_confirmation, 'Potrditev gesla:', class:'control-label col-xs-3 col-xs-offset-1' %>
        <div class="col-xs-4">
            <%= f.password_field :password_confirmation, class:'form-control' %><br />
        </div>
    </div>

    <div class="form-group">
        <div class="col-xs-4 col-xs-offset-4 right">
            <%= f.check_box :TOS %>
        <%= f.label :TOS, "Strinjam se s pogoji uporabe" %>
        </div>
    </div>

    <div class="form-group">
        <div class="col-xs-2 col-xs-offset-6 right">
            <br />
            <%= f.submit 'Registracija', class:'btn btn-success' %>
        </div>
    </div>

</div>
<% end %>