Codeigniter　実践入門メールフォームを作ってみよう②〜バリデーション（入力チェック）の設定〜



# 今回やること

前回①〜まずはページ表示〜で、Controller から view ファイルを読み込んで、ページを表示させることはできました。

次に、バリデーション（入力チェック）をつけます。
バリデーションといえばjQuery だけでも実装はできますが、安心のためサーバー側でもバリデーションを設けるのがよいでしょう。

また、Codeigniter のバリデーションは、設置が非常に簡単です。
まずは試してみましょう。


# Thank you ページの準備

まず、仕様を考えます。
今回は、こんな仕様にします。

①フォームに情報を入力
②入力情報の形式が正しいかチェック
③正しければ、Thank you ページに遷移
④正しくなければ、エラーメッセージを表示

フォームのページは、前回作成しました。
なので、今回作成が必要な view は、③で使うThank you ページですね。

````/application/views/thanks.php
<html>
<head>
  <title>Thank you</title>
</head>
<body>

<p>Succeeded!</p>

</body>
</html>

````

こんな感じで十分です。


# フォームヘルパー、バリデーションの設置

次に、フォーム送信とバリデーションの機能を実装していきます。
ここで使うのが、「ヘルパー」と「ライブラリ」です。

## ヘルパーとは

Codeigniter のマニュアルに、説明が載っています。
http://codeigniter.jp/user_guide_ja/general/helpers.html

> ヘルパーは、その名前のとおり、タスクの実行に役立つものです。各ヘルパーのファイルは、特定分野についての関数のコレクションです。

要するに、いろいろ複雑な挙動をプログラムするときに、簡単に実装できるように「助けてくれる」関数たちのことです。

Codeigniter のヘルパーには、URLヘルパー、ファイルヘルパー、Cookieヘルパーなど、様々なヘルパーがあります。

どれも、ゼロからコードを書いて書けないことはないですが、毎回そんな何十行ものコードを書くのは、面倒ですよね。

そういったよく使う機能が「ヘルパー」としてあらかじめ提供されており、時間を大幅に短縮できます。

Form ヘルパーについてはこちら。
http://codeigniter.jp/user_guide_ja/helpers/form_helper.html


## ライブラリとは

ライブラリについて、マニュアルはこちらです。
http://codeigniter.jp/user_guide_ja/general/libraries.html

ライブラリも、ヘルパーとよく似ています。
ライブラリがあることで、よく使う機能を、ゼロからコードを書かずに楽に実装することができます。

ここで疑問になるのが、ヘルパーとライブラリの違いですよね。
こちらのページには、次のように説明されています。

http://d.hatena.ne.jp/taramonera/20101226/1293328593

> ヘルパー

>CodeIgniterのシステムの一部として作成・メンテナンスされるべきもので、多くの機能を含む。たとえば、Formヘルパーはform要素の生成に必要となる多くのメソッドを含む。


>ライブラリ

>ライブラリはオブジェクト指向で記述できるので、ヘルパー・プラグインでは実装できない高機能なプログラミングに向く。

これでも分かりづらいですが。。
簡単に言うと、ライブラリは、その名の通り「図書館」。
図書館の中には膨大な書架があるように、ライブラリは様々なfunction を組み合わせた、１つの機能セットの構築に使います。

一方のヘルパーは、一人のひと。Formヘルパーならform要素の生成をする、など、用途がしぼられている、という理解でいいのではないでしょうか。
（この理解が正しいとは限りませんが。。）

## Controller の準備

さて、長くなりましたが、次はController を編集します。
前回作成した、form コントローラです。
こんな風にします。

````/application/controllers/form.php

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Form extends CI_Controller {

  public function index()
  {
    //ヘルパー呼び出し
    $this->load->helper('form');

    //ライブラリ呼び出し
		$this->load->library('form_validation');

    //バリデーション設定
		$this->form_validation->set_rules('name', '名前', 'required');
		$this->form_validation->set_rules('kana', 'カナ', 'required');
		$this->form_validation->set_rules('email', 'メールアドレス', 'required');
    $this->form_validation->set_rules('email2', 'メールアドレス後半', 'required');
    $this->form_validation->set_rules('sex', '性別', 'required');
    $this->form_validation->set_rules('pref', '都道府県', 'required');
    $this->form_validation->set_rules('fav', '好きな麺類', 'required');
    //エラーベッセージの基本形設定
    $this->form_validation->set_message('required', '%sが入力されていません。');

		if ($this->form_validation->run() == FALSE)
		{
      //初回読み込み、またはエラー時のview呼び出し
			$this->load->view('form_step1');
		}
		else
		{
      //バリデーション通過時のview呼び出し
			$this->load->view('thanks');
		}

  }
}

/* End of file welcome.php */
/* Location: ./application/controllers/welcome.php */
````

コメントの通りですが、手順としては

1. ヘルパー、ライブラリの呼び出し
2. バリデーションの設定
3. フォームのview, Thank you ページのview を呼び出す分岐を設定

ただ、これだけではまだ完成ではないです。
Form ヘルパー適用のため、viewも少し編集する必要があります。

## view の編集

view はこんな感じにします。

````/application/views/form_step1.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
	<title>Form Step1</title>

</head>

<body>

	<h1>Step1</h1>

	<?php echo validation_errors(); ?>
	<?php echo form_open('form'); ?>
		<fieldset>
			<p class="attention">*は必須項目です</p>
			<table>
				<tbody>
					<tr>
						<th>Name<span>*</span></th>
						<td><input type="text" id="name" name="name" value="" /></td>
					</tr>
					<tr>
						<th>Kana<span>*</span></th>
						<td><input type="text" id="kana" name="kana" value="" /></td>
					</tr>
					<tr>
						<th>Mail<span>*</span></th>
						<td><input type="text" id="email1" name="email" value="" />
						@
						<input type="text" name="email2" value="" /></td>
					</tr>
					<tr>
						<th>Sex<span>*</span></th>
						<td>
								<label for="male"><input type="radio" id="male" name="sex" value="male" />male</label>
								<label for="female"><input type="radio" id="female" name="sex" value="female" />female</label>
						</td>
					</tr>
					<tr>
						<th>Prefecture<span>*</span><br />
						this is selectable</th>
						<td>
					    	<select id="pref" name="pref">
					    			<option value="">---</option>
					    			<option value="08">東京都</option>
					    			<option value="09">茨城県</option>
					    			<option value="10">栃木県</option>
					    			<option value="11">群馬県</option>
					    			<option value="12">埼玉県</option>
					    			<option value="13">千葉県</option>
					    			<option value="14">神奈川県</option>

					    	</select>
	    				</td>
					</tr>
					<tr>
						<th>Favorite<span>*</span></th>
						<td>
								<label for="f1"><input type="checkbox" id="f1" name="fav" value="f1">Ramen</label>
								<label for="f2"><input type="checkbox" id="f2" name="fav" value="f2">Soba</label>
								<label for="f3"><input type="checkbox" id="f3" name="fav" value="f3">Udon</label>
						</td>
					</tr>
				</tbody>
			</table>
		</fieldset>
		<p class="submit"><input type="submit" value="submit"/></p>
	</form>

</body>
</html>
````

変えたのは一カ所だけ。
form の開始タグを、次のように変えました。

````
	<?php echo validation_errors(); ?>
	<?php echo form_open('form'); ?>
````

validation_errors() は、エラーメッセージを表示するためのもの、form_open('form') は、form タグを生成するための記述です。


## 試してみよう

ここまで出来たら、試してみましょう。
http://localhost/index.php/form
を表示し、何も入力せずに「submit」を押してみましょう。
おそらく、次のような画面が表示されるのではないでしょうか。

![スクリーンショット 2015-01-14 11.13.12.png](https://qiita-image-store.s3.amazonaws.com/0/32771/779afc54-554c-8a9e-8a68-42afa27095d9.png)


次に、全て情報を入力して「submit」を押してみましょう。
Succeeded! と書かれているThank you ページに遷移したら、成功です。

これで、一旦は完成です！


# バリデーションのカスタマイズ

現在のところ、入力チェックは「必須かどうか」しか行っていませんよね。
しかし実際は、「英数字かどうか」「数字○ケタかどうか」など、様々な形式をチェックする必要があると思います。

Codeigniter のバリデーションライブラリは、そういった細かい設定にも、もちろん対応しています。

詳しく解説・・・したいところですが、紙面の都合もありますので、続きはユーザーガイドをご覧下さい。

フォームバリデーション（検証）
http://codeigniter.jp/user_guide_ja/libraries/form_validation.html


次回は、いよいよメール送信機能を実装していきます。