登録フォームの処理について

2016/07/01

使うページは「投稿」「確認」「保存」の3つ。

  1. 「投稿→確認」時にはバリデーションチェック(入力データのチェック)を行う。
    エラーがあればエラーを表示(投稿 or 確認のどちらか)
  2. 「保存」時もバリデーションチェックを行う。
    エラーがあればトップページにリダイレクト(ココでエラーがあるってのはおかしいと思う)
  3. 「確認→投稿」で入力したデータを「投稿」ページに埋めて表示。

案1:「確認」にエラー表示

下記のようにそれぞれファイルを用意すればいいので一番分かりやすい。

▼「投稿」のファイル
<form action=”confirm.php”>
<button>確認</button>
</form>

▼「確認」のファイル:バリデーションチェックをしてエラーがあれば表示。
<form action=”complete.php”>
<button>修正</button>
<button>投稿</button>
</form>

▼「保存」のファイル
「保存成功」的なメッセージ

問題はパスワードの対応。

  • 「投稿」はinputタグで「type=password」とするから、ひとまずOK。
  • 「確認」では「セキュリティの都合上、非表示」とするから、ひとまずOK。でもセッションにパスワードを保存しておく。
  • 「保存」ではセッションからパスワードを取り出して処理を行うので、ひとまずOK。
  • 「確認→投稿」時には「パスワードは再入力してもらう」っていう方針でいくので、ひとまずOK。
  • 「確認」でバリデーションチェックでエラーが出た場合、「確認→投稿」となるのでパスワードを再入力してもらう必要あり。

入力チェックでエラーの度にパスワードの再入力ってのが不愉快。
あと、「入力チェックでエラー」で「修正ボタンを押して戻らなくちゃいけない」ってのも不愉快。

案2:「投稿」にエラー表示

「投稿」にエラー表示というよりは毎回自分自身を読み込んで状況に合わせて「投稿」「確認」「保存」のいずれかを表示。

▼「投稿」のときに表示:エラーがあったり「確認」から「修正」ボタンが押されたら値を埋め込む
<form action=””>
<button>確認</button>
</form>

▼「確認」のときに表示
<form action=””>
<button>修正</button>
<button>投稿</button>
</form>

▼「保存」のときに表示
「保存成功」的なメッセージ

入力チェックでエラーの度にパスワードの再入力が不要になるんだけど、PHPの処理が面倒。
面倒というかムダに条件が増えるので見づらくなって好きじゃない。

案3:「投稿+ajax」でエラー表示

この記事を書いてるときにふと気づいたのがこの案。密かに気にいってたりする。

▼「投稿」のファイル
<form action=”confirm.php”>
<button>確認</button>
</form>
<script type=”text/javascript”>
ajaxでバリデーションチェック。
・エラーがあればエラーを差し込む。
・エラーが無ければ「確認」へ遷移。
</script>

▼「確認」のファイル
<form action=”complete.php”>
<button>修正</button>
<button>投稿</button>
</form>

▼「保存」のファイル
「保存成功」的なメッセージ

入力チェックでエラーの度にパスワードの再入力が不要になるし、PHPの処理も複雑じゃないし。

新着(ニュース関連以外)

2017-06-27
MACにWin10をインストールしてみた:再挑戦。
2017-06-25
「簡単」っていうヤツらが多いけど・・・難しいぞ。
2017-06-06
FuelPHPのOILでtry・catchを使ったらエラーになった。
2017-04-11
動画をライトボックス風に表示したい・・・ライトボックス風って何? とりあえずbootstrapで対応したい。
2017-04-05
GitHubとかでzipをダウンロードすると・・・srcとdistと中身が似たようなのがよくあるので調べてみた。