Simple Form Error Notification

Question

I am trying to figure out how to use Simple Form with Rails, Devise, Omniauth and Bootstrap. I have several problems, but one of them is error notifications.

I have a devise sign in and sign up form inside Bootstrap modals. The registration form is as follows. Note that I removed the required: true function from the form because I don't like the asterisk being appended to the label (but I did try putting it back to see if the error notifications would work).

<% if user_signed_in? %>
  <li>
    <%= link_to('Edit registration', edit_user_registration_path) %>
  </li>
<% else %>
  <li>
    <%= link_to 'Register', new_user_registration_path, :remote => true, 'data-toggle' => "modal", 'data-target' => "#myRModal", :method => 'get' %>
  </li>

  <div class="modal fade" id="myRModal" tabindex="-1" role="dialog" aria-labelledby="myRModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title" id="myModalLabel" style="color:black">Register</h4>
        </div>

        <div class="modal-body">
          <%- if devise_mapping.omniauthable? %>
            <div class="facebookauth"> <%= link_to "Register with Facebook", user_omniauth_authorize_path(:facebook) %></div>
            <br />
          <% end -%>
          <%- if devise_mapping.omniauthable? %>
            <div class="linkedinauth"> <%= link_to "Register with LinkedIn", user_omniauth_authorize_path(:linkedin) %></div>
            <br />
          <% end -%>
        </div>

        <div class="modal-footer">



  <%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
     <%= f.error_notification %>

     <div class="form-inputs" style="padding-left:20%; text-align:left; color:black;">

       <%= f.input :first_name, placeholder: 'Enter your first name', autofocus: true, :input_html => {:maxlength => 15, :size => 40} %>
       <%= f.input :last_name, placeholder: 'Enter your surname', autofocus: true, :input_html => {:maxlength => 15, :size => 40} %>
       <%= f.input :email, placeholder: 'Enter email',  autofocus: true, :input_html => {:maxlength => 25, :size => 40} %>
       <%= f.input :password, placeholder: 'At least 8 characters', :input_html => {:maxlength => 15, :size => 40} %>
       <%= f.input :password_confirmation, placeholder: 'Confirm your password',  :input_html => {:maxlength => 15, :size => 40} %>
     </div>

     <div class="form-actions" style="padding-left:20%; padding-top:5%; text-align:left; color:black;">
       <%= f.button :submit, "Register" %><% end %>

I have a user modal which has validations for the presence of an email address and password.

I have a user/registration_controller with the following create function:

def create
  @user = User.new(user_params)#(params[:user])

  respond_to do |format|
    if @user.save
      # Tell the UserMailer to send a welcome email after save
      # AdminMailer.new_user_waiting_for_approval.deliver

      format.html { redirect_to(root_path, notice: 'Registration received.') }
      format.json { render json: root_path, status: :created, location: @user }
    else
      format.html { redirect_to(root_path, alert: 'Sorry! There was a problem with your registration. Please contact us to sort it out.') }
       # format.html { render action: 'new' }
       format.json { render json: @user.errors, status: :unprocessable_entity }
    end
  end
end

I have devise helpers in both my application helper and devise helper as follows:

def resource_name
  :user
end

def resource
  @resource ||= User.new
end

def devise_mapping
  @devise_mapping ||= Devise.mappings[:user]
end

My initializers file has two simple form files. One is simple_form.rb. The other is simple_form_bootstrap.rb

No errors display inline in the form. When I complete the form without an email address, I get the error that appears in the create function of my registration_controller.

I'd really like the error to appear inline, in the form, when the user clicks submit.

Does anyone know how to address this problem?

Thank you.

Answer 1

Make sure you have similar line in ur initializer's wrapper

b.use :error, wrap_with: { tag: 'span', class: 'help-block' }

as you mentioned in ur question, please remove required: false, and to remove the '*' for required, change it in config/locale/simple_form.en.yml

required:
  text: 'required'
  mark: ''