altere5's blog

I thought what I'd do was, I'd pretend I was one of those deaf-mutes. ( or shou'd i ? )

CakePHPのお勉強 4回目 入力内容のチェック再び

前回の作業で入力内容のチェックができた。
但し、結構不便な状態。

例えば、全て入力したけどメールアドレスだけが間違っていた場合。

f:id:altere5:20131116192842p:plain

全部消えてしまいます。
普通にこんなフォーム合ったらキレますね。

そこでこの部分を修正。

(1) 再入力用のフォームを準備

なぜ入力内容が消えてしまうかというと入力タグのデフォルト値が設定されていない為。
そこで再入力時には専用のビューを準備しデフォルト値に入力済みの値をセットする。

<form action="/contacts/thanks" method="POST">
    <div class="input text">
        <label for="username">お名前</label>
        <input type="text" name="username" id="username" value="<?php echo $this->request->data['username']; ?>" />
    </div>
    <b><?php echo $this->Form->error('contact.username'); ?></b>
    <div class="input text">
        <label for="email">メールアドレス</label>
        <input type="text" name="email" id="email" value="<?php echo $this->request->data['email']; ?>" />
    </div>
    <b><?php echo $this->Form->error('contact.email'); ?></b>
    <div class="input text">
        <label for="comment">コメント</label>
        <input type="text" name="comment" id="comment" value="<?php echo $this->request->data['comment']; ?>" />
    </div>
    <b><?php echo $this->Form->error('contact.comment'); ?></b>
    <div class="submit">
        <input type="submit" value="確認" />
    </div>
</form>
 

それぞれのINPUTタグのデフォルト値に入力値をセット。
これだけ。

(2) 表示時に利用するビューの変更

このままでは「reinput.ctp」が呼ばれることがないので、入力エラーが発生した場合に利用するよう設定を変更。

<?php

class ContactsController extends AppController {

    // indexアクション
    public function index() {}

    // thanksアクション
    public function thanks() {

        if($this->request->is('post')) {

            $this->Contact->set($this->request->data);

            if($this->Contact->validates()) {

                $this->Contact->create();
                $this->Contact->save($this->request->data);

                //POSTデータを受け取った場合の処理を記述
                $this->set('username', $this->request->data['username']);

            } else {

                $this->render('reinput');

            }

        } else {

            $this->redirect('index');

        }

    }

}
 

25行目で呼び出すビューを「reinput」に変更。 これでエラーが発生した場合は「reinput」を使った表示になり、入力した値も補完される。

(3) 動きを確認

実際にエラーを発生させて確認する。

f:id:altere5:20131116194924p:plain

ちゃんと入力内容が補完されていい感じ。