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

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の処理も複雑じゃないし。

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

2018-07-26
年賀状で「新春」とか書くけど・・・何故なんだろうと8月を目前にした今、疑問に思った。
2018-05-16
PHPで画像のヘッダ情報(?)の「Orientation」を元に画像回転させたい。
2018-03-05
Android Studioをインストール。エミュレータを軽くするトコまで終わらせたかったけど、挫折した。
2018-02-23
プッシュ通知について調べてた時にでてきたServiceWorker。そのServiceWorkerについてのメモ。
2017-12-13
jqueryで取得したDOM要素をオブジェクトじゃなくて、配列で受け取りたい