I realize this question, or a similar one, has been asked before, but none of the proposed solutions that I've found have worked for me.
So I'm building a website using the Devise authentication gem, and recently tried to incorporate Bootstrap for styling. I got it working, but the Devise error messages no longer display on the Sign Up page (i.e., the messages telling the user that certain fields cannot be empty, etc.).
(I'm not certain it's the incorporation of Bootstrap that broke things, but it did happen somewhere in that commit.)
Also of note is that the page URL the user is redirected to when Sign Up fails changed from "https://my-site-wanderspeak.c9users.io/users" to this monster: "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=". Both are the same Sign Up page, but the first included error messages.
My view:
<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>
(The ending </body> tag isn't showing up for some reason.)
My 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>
My (edited) 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
Please let me know if there's any other information I should include.
