railsでログインフォームを実装しています。
ajaxでモーダルウィンドウで表示させます。
emailとpasswordの認証エラーが出たとき、エラーメッセージをajaxで取得して、
モーダル上のエラーメッセージ表示欄に表示させたいのですが、
javascriptで取得する前にブラウザ上に出力されてしまいます。
(jsonの文字列が表示される以外は画面は真っ白の状態です。)
どのように対処したらよろしいのでしょうか。
ちなみに正しいemailとpasswordでは、正常にログインできる状態になります。
■ブラウザに表示されるjson形式のメッセージ
{"email":"Emailを入力して下さい。","password":"パスワードを入力して下さい。"}
■モーダルウィンドウのview(login/index.html.erb)
<%= form_for(@user, url:{controller: 'login', action: 'index'}, html:{id: 'js-form', class: 'form form__login'}, remote:true) do |f| %> <fieldset class="form__field--login"> <%= f.label :email, 'Email', :class => 'form__label' %> <%= f.text_field :email, :id => 'user_email', :class => 'form__text' , :placeholder => 'Email' %> <span class="form__helper" id="js-valid_email"></span> <%= f.label :password, 'パスワード', :class => 'form__label' %> <%= f.password_field :password, :id => 'user_password', :class => 'form__password' , :placeholder => 'パスワード' %> <span class="form__helper" id="js-valid_password"></span> <label for="auto_login" class="form__checkboxLbl"><input type="checkbox" name="auto_login" id="auto_login" class="form__checkbox"> 次回から自動ログインする </label> </fieldset> <%= f.submit 'ログイン', {:class => 'btn btn__submit--size_large', :id => 'js-submitBtn'} %> <% end %>
■ログイン用のコントローラー
return render :json => @errMsg.to_jsonとなっている箇所が不具合が発生しているところになります。
class LoginController < ApplicationController protect_from_forgery def index @title = 'トップ' @errMsg = Hash.new if request.post? then @user = User.new user_params unless @user.valid?(:login) then #エラーメッセージの連想配列を取得 @errMsg = User.error_message(@user) return render :json => @errMsg.to_json end set_user = User.find_by(email: @user.email) unless set_user.authenticate(@user.password) then return redirect_to '/login' end Rails.cache.write('login_user', set_user) return redirect_to '/home' else @user = User.new end end def destroy Rails.cache.delete('login_user') redirect_to '/login' end private def user_params params.require(:user).permit(:email, :password) end end
■view側のjavascript(login/index.html.erb)
$(function () { $('#js-form').on('ajax:success',function(data){ console.log(data); }); $('#js-form').on('ajax:error',function(data){ console.log(data); }); }); </script>
■2017/8/13更新
■ログイン用コントローラー
class LoginController < ApplicationController layout 'info_get' protect_from_forgery def index @title = 'トップ' @err_msg = Hash.new @user = User.new end def login user = User.new user_params if user.valid?(:login) then set_user = User.find_by(email: user.email) unless set_user.authenticate(user.password) then return redirect_to '/login' end if params[:auto_login] then auto_login = AutoLogin.new auto_login.save(:user_id => set_user.id) end Rails.cache.write('login_user', set_user) return redirect_to '/home' end #エラーメッセージの連想配列を取得 @err_msg = User.error_message(user) end def ajax f = File.open("#{Rails.root}/app/assets/javascripts/carousel.xml") render :xml => f end def destroy Rails.cache.delete('login_user') redirect_to '/login' end private def user_params params.require(:user).permit(:email, :password, :auto_login) end end
■login/login.js.erb
$('#js-valid_email').text('<%= @err_msg[:email] %>'); $('#js-valid_password').text('<%= @err_msg[:password] %>');
■login/index.js.erb
<%= form_for(@user, url:{controller: 'login', action: 'login'}, html:{id: 'js-form', class: 'form form__login'}, remote:true) do |f| %> <fieldset class="form__field--login"> <%= f.label :email, 'Email', :class => 'form__label' %> <%= f.text_field :email, :id => 'user_email', :class => 'form__text' , :placeholder => 'Email' %> <span class="form__helper" id="js-valid_email"></span> <%= f.label :password, 'パスワード', :class => 'form__label' %> <%= f.password_field :password, :id => 'user_password', :class => 'form__password' , :placeholder => 'パスワード' %> <span class="form__helper" id="js-valid_password"></span> <label for="auto_login" class="form__checkboxLbl"><input type="checkbox" name="auto_login" id="auto_login" class="form__checkbox"> 次回から自動ログインする </label> </fieldset> <%= f.submit 'ログイン', {:class => 'btn btn__submit--size_large', :id => 'js-submitBtn'} %> <% end %>
■動作環境
Rails5
Ruby2.2
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/08/12 15:34
退会済みユーザー
2017/08/12 15:49