前回までで、controllerの作成と画面遷移周りを作ってきた。今回はフォームの値チェック、Validateを実装しようと思う。

といってもRailsの場合、ちょー簡単。ActiveRecordの機能を使えば、フォームの名前を宣言するだけで終了する。前々回でmodelをgeneratorを使って作成したが、そのソースを少しいじるだけ。

PLAIN TEXT
RUBY:
  1. vi app/models/contact.rb
  2. class Contact <ActiveRecord::Base
  3.     validates_presence_of :personal, :email, :message
  4.     validates_format_of :email, :with => /^([^@\s]+)@((?:[-a-z0-9]+\.)+[a-z]{2,})$/i, :allow_nil => true, :if => Proc.new {|contact| !contact.email.blank?}
  5. end
  6.  
  7. # Controller側のvalidateの呼び出し。confirmメソッドのみ記述します。
  8. vi app/controllers/contact_controller.rb
  9. ～
  10.     def confirm
  11.         @contact = Contact.new(@params[:contact])
  12.         unless @contact.valid?
  13.             render :action => "form"
  14.         end
  15.     end
  16. ～

validates_presence_ofが値の存在チェック。今回はすべての項目をチェックしている。
そして、emailのみvalidates_format_ofの正規表現を利用して、メールアドレスの形式を簡単にチェックしている。
あと、allow_nilというoptionをつけると、nilの場合は、チェックを飛ばしてくれる。。。と思っていたのですが、実際今回のアプリケーションではなぜかnilではなく、blank("")?として渡っていた（呼び出し方がまずいのかな。。。）ので、ifというoptionでblankかどうかを見るようにしました。
その他、詳しい説明はRails APIドキュメントにあります。
呼び出しは、validメソッドを呼ぶと、validateのみの動作をしてくれるよう。引っかかった場合は、viewをformに戻すようにしています。

そして、form.rthmlには、

<%= error_messages_for 'contact' %>

と言う記述の部分にエラーメッセージが出力されるようになります。

はい、これだけで終了なんですが、実はこのままだとエラーメッセージが英語なんですね。それでは、さすがに日本人向けサイトには厳しいので、エラーメッセージをActiveHeartを利用して日本語化します。

今回のsampleプロジェクト上でActiveHeartをインストールします。

cd rails_project/sample
ruby script/plugin install http://svn.rails2u.com/public/plugins/trunk/active_heart/

これだけで、必要なファイルが配置されメッセージが日本語化される。

しかし、このままではフォームの項目名が英語のままなので、さきほどのvalidateを宣言したmodelにset_fields_nameという宣言を入れてあげます。

PLAIN TEXT
RUBY:
  1. class Contact <ActiveRecord::Base
  2.     set_field_names :personal => 'お名前', :email => 'E-Mail',
  3.         :message => 'お問合せ内容'
  4.     validates_presence_of :personal, :email, :message
  5.     validates_format_of :email, :with => /^([^@\s]+)@((?:[-a-z0-9]+\.)+[a-z]{2,})$/i, :allow_nil => true, :if => Proc.new {|contact| !contact.email.blank?}
  6. end

これで、項目名の日本語化も完了！

調べてみると、最近はGetText-Packageを利用するのが主流だとか・・・
これは、また試してみるとします。

あと、Validateをしたときにscaffoldでは、エラーの枠やエラーのある部分を囲ってくれるようなCSSを利用してわかりやすく表示してくれるんですが、利用していない場合、そのCSSが作成されていないので、scaffoldで作成されるCSSをここに載せておきます。
public/stylesheets/scaffold.cssあたりに置いてください。

PLAIN TEXT
CSS:
  1. .fieldWithErrors {
  2. padding: 2px;
  3. background-color: red;
  4. display: table;
  5. }
  6.  
  7. #errorExplanation {
  8. width: 400px;
  9. border: 2px solid red;
  10. padding: 7px;
  11. padding-bottom: 12px;
  12. margin-bottom: 20px;
  13. background-color: #f0f0f0;
  14. }
  15.  
  16. #errorExplanation h2 {
  17. text-align: left;
  18. font-weight: bold;
  19. padding: 5px 5px 5px 15px;
  20. font-size: 12px;
  21. margin: -7px;
  22. background-color: #c00;
  23. color: #fff;
  24. }
  25.  
  26. #errorExplanation p {
  27. color: #333;
  28. margin-bottom: 0;
  29. padding: 5px;
  30. }
  31.  
  32. #errorExplanation ul li {
  33. font-size: 12px;
  34. list-style: square;
  35. }
  36.  
  37. div.uploadStatus {
  38. margin: 5px;
  39. }
  40.  
  41. div.progressBar {
  42. margin: 5px;
  43. }
  44.  
  45. div.progressBar div.border {
  46. background-color: #fff;
  47. border: 1px solid grey;
  48. width: 100%;
  49. }
  50.  
  51. div.progressBar div.background {
  52. background-color: #333;
  53. height: 18px;
  54. width: 0%;
  55. }
  56. </code>
  57. </blockquote>
  58.  
  59. app/views/contact/form.rhtmlにこのCSSを読み込むように修正
  60. <blockquote><code>&lt;head&gt;
  61. ～
  62. &lt;link href="../stylesheets/scaffold.css" rel="stylesheet" type="text/css"&gt;
  63. ～
  64. &lt;/head&gt;

これくらいの手順で入力チェックができるのであれば、すごく簡単ですね。

blogranking←ぽちっとな