RailsでSubmit時にAjaxで値をチェックしてポップアップを出す

先日に引き続きRailsねた。今日のお題は「フォームをSubmitするときに、フォームの値がおかしかったらユーザーに通知。でも、通知はあくまで通知なので、無視することもできる。」というもの。

後半の条件がなかったら普通にバリデーションをかけて、エラーをユーザーに通知すればいいだけなんですが、ここではエラーが無視できるようにするというのがミソ。しかも、チェックのルールはかなり面倒で、かつ、DB参照の必要もあるので、どちらにせよ一度サーバにPOSTしないとバリデーションはできないというのが前提条件。

できてみたら簡単だったものの、どうやるかちょっと悩みました。

† 処理フロー

通知はJavaScriptのconfirm()程度のものでいいみたいなので、こんなフローを考えてみました。

1.先日の要領でフォームをAjaxでポスト
2.ポストされた値をチェック
　2.1a.エラーが無ければRJSを使ってフォームを（Ajaxではなく）普通にポストして次画面へ
　2.1b.エラーがあればRJSを使ってconfirm()のポップアップを出す
　　2.1b.1a.「はい」の場合には2.1aと同じようにフォームをポストして次画面へ
　　2.1b.1b.「いいえ」の場合にはポストをしないで終了

† ちょっと作ってみたもの

ということで、ちょっと作ってみたのがこれ。値がマイナスだとポップアップで確認がでますが、そのまま「はい」と答えれば強行できます。なんか2回もFormをSubmitしちゃっててダサいような気がしなくもないけど、とりあえず動いたので良し。
それにしてもRJSは便利だ。。。。。

app/controllers/test2_controller.rb

class Test2Controller < ApplicationController
  
  def valcheck
    val = params[:item][:val]
    
    render :update do |page|
      if val.to_i < 0 
        page << "if(confirm('数値がマイナスですが本当にいいですか？') ) {"
        page[:test_form].submit
        page << "}"
      else
        page[:test_form].submit
      end
    end
  end
  
  def update
    # ここに本当のアップデート処理を書く
  end
end

app/views/test2/index.rhtml

<html>
    <head>
        <title>ajax validation</title>
        <%=javascript_include_tag :defaults %>
    </head>
    <body>
        <div id="contents">
			<% form_tag({:action => 'update'}, {:id => 'test_form'}) do %>
				マイナスだとアラート:<%=text_field 'item', 'val', :size => 10 %>
				<%= submit_tag '送信',
					:onclick => remote_function(
						:url => { :action => :valcheck },
						:submit => 'test_form'
						) + ';return false;',
					:type => :button
				%>
			<% end %>
		</div>
    </body>
</html>

app/views/test2/update.rhtml

<html>
 	<head>
 	 	<title>ajax validation</title>
 	 	<%=javascript_include_tag :defaults %>
 	</head>
 	<body>
		<div id="contents">
 	 		Updated!
		</div>
 	</body>
</html>

† 参考

a timocracy of one : tag form
page << "window.open('http://www.google.com');" <<--- HAS NO EFFECT -
Ruby on Rails: Talk | Google グループ