LoginSignup
14
20

More than 5 years have passed since last update.

@seimatz_dev(Sei)

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

Last updated at Posted at 2015-01-14

今回やること

前回①〜まずはページ表示〜で、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

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

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

ヘルパー

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

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

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

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

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

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

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

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

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

14
20
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
14
20