如何在具有设计功能的模态中显示忘记的错误消息

How to show forgot error messages in a modal with devise functionality?

本文关键字：模态 显示 忘记 消息 错误 功能      更新时间：2023-09-26

我有一个登录表单，那里有一个忘记的密码链接，当我们点击一个模态弹出窗口出现，我们输入我们的电子邮件地址。这是很好的，当我们输入正确/现有的电子邮件，但如果我们输入任何错误的电子邮件或电子邮件不存在于数据库，它不显示任何错误信息。请帮助。

我尝试使用<%= devise_error_messages! %>，但没有用。我认为我们必须使用jQuery/javascript功能来显示错误。但是如何表现出来模型本身?这是我的观点:

<div class="container">
  <div class="section section-signup">
        <%= semantic_form_for(@resource, :as => resource_name, :url => user_session_path, :remote => true, :format => :json, :html => { :id => 'mainLogin' }) do |f| %>
        <%= f.inputs do %>
        <%= f.input :email, :label => 'Your email address', :input_html => { :placeholder => "Email"} %>
                <%= f.input :password, :label => 'Your password', :input_html => { :placeholder => "Password"} %>
            <% end %>
        <%= f.buttons do %>
          <% if devise_mapping.rememberable? %>
            <%= f.input :remember_me, :as => :boolean, :label => "Remember me on this computer", :required => false,  :input_html => {:class => "remember-me"} %>
          <% end %>
        <%= f.commit_button :label => 'Sign me in', :button_html => {:class => 'login submit button', :disable_with => 'Wait...', :id => 'user_submit' }%>
          <% end %>
      <div class="forgot">Yikes: <a class="pass-reset-btn cboxElement" href="#pass-reset" data-toggle="modal" data-target="#myModal">I forgot my password!</a></div>
        <% end %>
  </div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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">Password reset</h4>
      </div>
      <div class="modal-body">
        <p>Enter your email address and we'll shoot you a link for resetting your password.</p>
        <!-- Start Fromtastic Markup -->
        <%= semantic_form_for(resource_name, :url => password_path(resource_name), :remote => true, :format => :json, :html => { :id => 'password_reset' }) do |f| %>
          <%= f.inputs do %>
            <%= f.input :email, :label => 'Your email address', :input_html => { :placeholder => "Enter your email..."}%>
          <% end %>
          <%= f.buttons do %>
            <%= f.commit_button :label => 'Send me that link', :button_html => {:class => 'submit button', :disable_with => 'Wait...' }%>
          <% end %>
          <div class="clearfix"></div>
        <% end %>
        <!-- End Fromtastic Markup -->
      </div>
    </div>
  </div>
</div>

<%= f.inputs do %>
            <%= f.input :email, :label => 'Your email address', :placeholder => "Enter your email...", :'data-validate' => '/users/checkemail'%>
          <% end %>
<p id="email_search" class='email_error' style="display: none;">Email not found</p>
$(function() {
  var msgp = document.getElementById('email_search');
    $('[data-validate]').blur(function() {
        $this = $(this);
        $.get($this.data('validate'), {
            email: $this.val()
        }).success(function() {
            $this.removeClass('field_with_errors');
            msgp.style['display'] = 'none';
        }).error(function() {
            $this.addClass('field_with_errors');
            msgp.style['display'] = 'block';
        });
    });
});

In users controller:
def checkemail
    if params[:email] == "" 
      render :nothing => true, :status => 200
    elsif User.where('email = ?', params[:email]).count == 0
      render :nothing => true, :status => 409
    else
      render :nothing => true, :status => 200
    end
    return
end
相关文章：