Home » Programing, Ruby » Ruby on Railsでフォームを作成する#3(フォームチェック)

Check     このエントリーをはてなブックマークに追加

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

といってもRailsの場合、ちょー簡単。ActiveRecordの機能を使えば、フォームの名前を宣言するだけで終了する。前々回でmodelをgeneratorを使って作成したが、そのソースを少しいじるだけ。
[ruby]vi app/models/contact.rb
class Contact < ActiveRecord::Base validates_presence_of :personal, :email, :message validates_format_of :email, :with => /^([^@\s]+)@((?:[-a-z0-9]+\.)+[a-z]{2,})$/i, :allow_nil => true, :if => Proc.new {|contact| !contact.email.blank?}
end

# Controller側のvalidateの呼び出し。confirmメソッドのみ記述します。
vi app/controllers/contact_controller.rb

def confirm
@contact = Contact.new(@params[:contact])
unless @contact.valid?
render :action => “form”
end
end

[/ruby]
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という宣言を入れてあげます。
[ruby]class Contact < ActiveRecord::Base set_field_names :personal => ‘お名前’, :email => ‘E-Mail’,
:message => ‘お問合せ内容’
validates_presence_of :personal, :email, :message
validates_format_of :email, :with => /^([^@\s]+)@((?:[-a-z0-9]+\.)+[a-z]{2,})$/i, :allow_nil => true, :if => Proc.new {|contact| !contact.email.blank?}
end[/ruby]
これで、項目名の日本語化も完了!

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

あと、Validateをしたときにscaffoldでは、エラーの枠やエラーのある部分を囲ってくれるようなCSSを利用してわかりやすく表示してくれるんですが、利用していない場合、そのCSSが作成されていないので、scaffoldで作成されるCSSをここに載せておきます。
public/stylesheets/scaffold.cssあたりに置いてください。
[css].fieldWithErrors {
padding: 2px;
background-color: red;
display: table;
}

#errorExplanation {
width: 400px;
border: 2px solid red;
padding: 7px;
padding-bottom: 12px;
margin-bottom: 20px;
background-color: #f0f0f0;
}

#errorExplanation h2 {
text-align: left;
font-weight: bold;
padding: 5px 5px 5px 15px;
font-size: 12px;
margin: -7px;
background-color: #c00;
color: #fff;
}

#errorExplanation p {
color: #333;
margin-bottom: 0;
padding: 5px;
}

#errorExplanation ul li {
font-size: 12px;
list-style: square;
}

div.uploadStatus {
margin: 5px;
}

div.progressBar {
margin: 5px;
}

div.progressBar div.border {
background-color: #fff;
border: 1px solid grey;
width: 100%;
}

div.progressBar div.background {
background-color: #333;
height: 18px;
width: 0%;
}

app/views/contact/form.rhtmlにこのCSSを読み込むように修正

<head>

<link href="../stylesheets/scaffold.css" rel="stylesheet" type="text/css">

</head>
[/css]

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

Check     このエントリーをはてなブックマークに追加
タグ: