设计合并 Bootstrap 后不显示的错误消息

Question

我意识到这个问题或类似的问题以前曾被问过，但我发现 none 的建议解决方案对我有用。

所以我正在使用 Devise 身份验证 gem 构建一个网站，并且最近尝试将 Bootstrap 用于样式。我让它工作了，但是设计错误消息不再显示在注册页面上（即告诉用户某些字段不能为空的消息等）。

（我不确定是 Bootstrap 的并入破坏了事情，但它确实发生在那个提交的某个地方。）

另外值得注意的是，当注册失败时用户被重定向到的 URL 页面从“https://my-site-wanderspeak.c9users.io/users”更改为这个怪物： “https://my-site-wanderspeak.c9users.io/users/sign_up?utf8=%E2%9C%93&authenticity_token=QI2XnYtJnm2VdWbff%2B1HGCHQ21r1aQR7li%2FemTWJni3sP0vl7f%2FIyRDdXVf1iAdRsGpK63skwc6UqUEXFvK2Gg%3D%3D&user%5Bfirstname%5D=&user%5Blastname%5D=&user%5Bdob%282i%29%5D=11&user%5Bdob%283i%29%5D=5&user%5Bdob%281i%29%5D=2017&user%5Bphone%5D=&user%5Bemail%5D=&user%5Bpassword%5D=&user%5Bpassword_confirmation%5D=”。两者都是相同的注册页面，但第一个包含错误消息。

我的看法：

<head>
    <!-- Include Bootstrap and HTML Kickstart (for style) -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
    <link rel="stylesheet" href="/assets/kickstart.css" media="all" /> <!-- KICKSTART -->
    <%= stylesheet_link_tag "users" %>
</head>

<body>
  <form>
    <div class="container" style="background-color:white">
      <div class="row" style="text-align:center">
        <div class="col-md-12" style="margin-bottom:5px">
          <h2>Sign up</h2>
        </div>
      </div>

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

      <div class="row">
        <div class="col-md-6 left-col form-group">
          <div class="field padded">
            <label>First name:</label>
            <%= f.text_field :firstname, size: "20" %>
          </div>

          <div class="field padded">
            <label>Last name:</label>
            <%= f.text_field :lastname, size: "20" %>
          </div>

          <div class="field padded">
            <label>Date of birth:</label>
            <%= date_select :user, :dob, :start_year => 1900, :end_year => 2017, :use_month_numbers => true, :order => [:month, :day, :year] %>
          </div>

          <div class="field">
            <label>Phone:</label>
            <%= f.text_field :phone, :id => "phone", placeholder: "(___) ___-____", size: "16" %>
          </div>

          <div class="field padded">
            <label>Email:</label>
            <%= f.email_field :email, placeholder: "(this will be your username)", size: "32" %>
          </div>

          <div class="field padded">
            <label>Password:</label>
            <%= f.password_field :password, autocomplete: "off", placeholder: "(6 characters minimum)", size: "24" %>
          </div>

          <div class="field padded">
            <label>Confirm password:</label>
            <%= f.password_field :password_confirmation, autocomplete: "off", size: "24" %>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-md-12" style="text-align:center">
          <div class="actions" style="margin-bottom:20px; margin-top:-10px">
            <button class="large purple">Sign Up</button>
          </div>

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

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

（结尾的 </body> 标签由于某种原因没有显示。）

我的application.html.erb:

<html>
  <head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
    <title>Welcome to the Community Board!</title>
    <%= stylesheet_link_tag 'application', 'media' => 'all', 'data-turbolinks-track' => true %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
    <%= csrf_meta_tags %>
  </head>
  <body>
    <h1 class="title">Welcome to the Community Board!</h1>
    <div id="main">
      <% if flash[:notice] %>
        <div class="message" id="notice">
          <%= flash[:notice] %>
        </div>
      <% elsif flash[:warning] %>
        <div class="message" id="warning">
          <%= flash[:warning] %>
        </div>
      <% end %>
      <%= yield %>
    </div>
  </body>
</html>

我的（已编辑）devise_helper.rb：

    module DeviseHelper
  # A simple way to show error messages for the current devise resource. If you need
  # to customize this method, you can either overwrite it in your application helpers or
  # copy the views to your application.
  #
  # This method is intended to stay simple and it is unlikely that we are going to change
  # it to add more behavior or options.
  def devise_error_messages!
    return "" if resource.errors.empty?

    messages = resource.errors.full_messages.map { |msg| content_tag(:li, msg) }.join

    html = <<-HTML
      <div class="alert alert-danger">
        <button type="button" class="close" data-dismiss="alert">x</button>
        <strong>#{messages}</strong>
      </div>
    HTML

    html.html_safe
  end
end

如果我还应该包含任何其他信息，请告诉我。

Answer 1

答案：从视图中删除 <form> 标签。

不知道为什么。

设计合并 Bootstrap 后不显示的错误消息

Devise error messages not displaying after incorporating Bootstrap

devise

twitter-bootstrap

ruby-2.4

ruby-on-rails-5.1