ご注意！この記事のコメントフォームではエラーチェックされませんので、試しに送信してみないでください(´･ω･`)
JavaScript のおべんきょう 2008 年 5 月吉日
上記のサンプル、完成に浮かれて JavaScript 無効の場合を考えていませんでした。takkyun せんせーご指摘ありがとうございます。
何がまずいかというと、JavaScript が有効で入力内容にエラーがあった場合送信ボタンをクリックできないのですが、JavaScript が無効だと送信できてしまう！
なので、出力される php 側でも値のチェックをしないとダメよとのことでした。
というわけでがんばった！
チェック内容について
change.js で使った正規表現をそのまま使えるのではないか。
preg_match という関数を使う。
色名の正規表現 /^[0-9a-f]{6}$/ はこれだと大文字の FFFFFF でもエラーになってしまうので、/^[0-9a-f]{6}$/i とした。change.js も修正。
最後の i が大文字小文字の区別をなくすというもの。
チェック項目について
フォームに送信されたものなのかチェックする。もし出力後のページを直接開いちゃう悪い子ちゃんがいたらエラーを出す。
出力する項目 ( $_POST[‘name’] ) のうち、ラジオボタンではないものをチェックする。(ラジオボタンのものはどれか 1 つに必ずチェックが入っているはずなので省略する)
内容と項目をまとめる
preg_match(正規表現, 出力する項目) を 1 つずつ書いていくのではなく、change.js の var roll みたいにまとめて書きたい。
連想配列というのを使うことにする。
配列を繰り返し呼び出すには foreach 構文を使う。unset で解除。
書いてみた！
JavaScript のおべんきょう 2008 年 5 月吉日
JavaScript 無効の状態でお試しください。
// チェックリスト
$data = array(
$_POST["changeColor"] => '/^[0-9a-f]{6}$/i',
$_POST["changeWidth"] => '/^[0-9]{1,2}$/',
$_POST["changeLineheight"] => '/^[0-9.]{1,3}$/'
);
// エラーのときの XHTML (ヘッダ)
$errorHeader = "<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head profile="http://purl.org/net/ns/metaprof">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>
エラーが発生しました - JavaScript のおべんきょう 2008 年 5 月吉日 から送信されたデータ
</title>
</head>
<body>
<h1>
エラーが発生しました
</h1>
<p>";
// エラーのときの XHTML (フッタ)
$errorFooter = "</p>
</body>
</html>";
// フォームから送信されたものか確認
if(isset($_POST['submit'])) {
// チェックリストを繰り返す
foreach($data as $post => $regex) {
// 正規表現に当てはまらない場合
if(!preg_match($regex, $post)) {
// 未入力があった場合
if($post == "") {
$errorMsg = "未入力の項目がありますのでご確認ください。";
}
// 入力値が不正な場合
else {
$errorMsg = "「 {$post} 」 と入力されている部分がエラーとなっていますのでご確認ください。";
}
// エラーメッセージを出力
echo $errorHeader, $errorMsg, $errorFooter;
// 終わり
exit();
}
}
// チェックリストの繰り返しの終わり
unset($data);
}
// フォームから送信されたものでない場合 ( output.php を直接開いたとき)
else {
$errorMsg = "<a href="https://p15.jp/files/study/2008/05/input.html">https://p15.jp/files/study/2008/05/input.html</a> から送信してください。";
echo $errorHeader, $errorMsg, $errorFooter;
exit();
}
ここでまた困ったことが・・・。
エラーが出てフォームに戻る場合、Firefox だとブラウザの戻る機能で戻っても入力した値が残っているのに値が初期値に戻ってしまうブラウザが多いようです。
調べたところ「フォームに戻るボタン」をつけて、POST でフォームに進むという方法と、セッションを使うという方法があることがわかりました。
そこまで一気にやってしまおうかと思ったけど力つきたので今日はこれまで。
「PHP で入力フォームのエラーチェック」への2件のフィードバック