さて、
http://yuubiseiharukana.blog.shinobi.jp/Entry/17/
のフォームをJavaScriptでバリデートしてみましょう。
JavaScriptでバリデートを行う理由は、サーバ側の負担軽減のためです。
素のフォームのままだと、毎回サーバにデータを送信しチェックを行うのでサーバに負荷がかかります。
ユーザ側のブラウザでチェックを行わせることで、サーバ側の負担を和らげることができます。
まずformタグを変更します。
<form method="POST" action="<?php print(htmlspecialchars($_SERVER['SCRIPT_NAME'])); ?>" onSubmit="return check()">
formのonSubmit部分に関数を追加しました。
これでJavaScript対応ブラウザでsubmitボタンを押した場合、check()関数が発動します。
未対応ブラウザの場合は、そのまま送信されます。
では早速関数checkを作りましょう。
|
function check
//エラーメッセージ入れ
var errorMessage="";
//氏名をチェック
if(document.form[0].shimei.value == ""){
errorMessage +="氏名を入力してください\n";
}
//メールアドレスをチェック
if(document.form[0].mail.value == ""){
errorMessage +="メールアドレスを入力してください\n";
}
//性別をチェック
if(document.form[0].sex.value == ""){
errorMessage +="性別を選択してください\n";
}
//エラーがあれば表示
if(errorMessage == ""){
return true;
}else{
alert(errorMessage);
return false;
}
}
|
入力されているかどうかだけを簡単にチェックしています。
onSubmitで呼ばれる関数がfalseを返さない限り、フォームはそのままactionを実行してしまいます。
エラーが見つかった場合のみfalseを返すことで、その場合は先に進まないようにしています。
特になんて難しいことはありませんね。
今後基本的にJavaScriptは別ファイルにして、
<SCRIPT TYPE="text/javascript">
で呼び出すことにします。
未対応ブラウザのためにコメントで囲ったりという手間も無くなり、ソースも見やすくなるので推奨されます。
index.php
|
<?php
#初期設定
$error_message_array="";
if($_POST){
#POSTがあれば、取得
$shimei=$_POST['shimei'];
$mail=$_POST['mail'];
$sex=$_POST['sex'];
#入力をチェック
if(empty($shimei)){$error_message_array.="氏名が入力されていません<br />";}
if(empty($mail)){$error_message_array.="メアドが入力されていません<br />";}
if($sex!=1 && $sex!=2){$error_message_array.="性別が入力されていません<br />";}
}else{
#POSTがなければ
$error_message_array.="フォームを入力してください<br />";
}
#エラーの有無で分岐
if(empty($error_message_array)){
$data='氏名:'.$shimei.',メアド:'.$mail.'性別:'.$sex;
$fp = fopen("form.txt","r+");
flock($fp,LOCK_EX);
fputs($fp,$data);
fclose($fp);
print("投稿を受け付けました。<br />ご協力ありがとうございました");
}else{
?>
<?php print($error_message_array); ?>
<SCRIPT TYPE="text/javascript" SRC="check.js"></SCRIPT>
<form method="POST" action="<?php print(htmlspecialchars($_SERVER['SCRIPT_NAME'])); ?>" onSubmit="return check()">
氏名：<input type="text" name="shimei" maxlength="64" value="<?php print(htmlspecialchars($shimei)); ?>"><br />
メアド：<input type="text" name="mail" maxlength="64" value="<?php print(htmlspecialchars($mail)); ?>"><br />
性別：
<input type="radio" name="sex" value="1"<?php if($sex==1){print(" checked");} ?>>男
<input type="radio" name="sex" value="2"<?php if($sex==2){print(" checked");} ?>>女<br />
<input type="submit" name="soushin" value=" 確認 ">
</form>
<?php
}
?>
|
check.js
function check
var errorMessage="";
if(document.form[0].shimei.value == ""){
errorMessage +="氏名を入力してください\n";
}
if(document.form[0].mail.value == ""){
errorMessage +="メールアドレスを入力してください\n";
}
if(document.form[0].sex.value == ""){
errorMessage +="性別を選択してください\n";
}
if(errorMessage == ""){
return true;
}else{
alert(errorMessage);
return false;
}
} |
さて、JavaScript側とPHP側、両方で入力のチェックを行っているわけですが、では二重に同じ事を行うのは無駄だからどちらかを省くべきでしょうか？
いいえ。この場合は、両方でチェックを行うべきです。
なぜならば、知ってのとおりJavaScriptによるチェックは簡単にすり抜けられるからです。
ちなみにJavaScriptの代入演算子+=は、数字でなければ文字の連結を行ってくれますが、
PHPで+=と書くと無理矢理数値に変換した上で計算してくれます。
PHPで文字列連結は.=と書かなければなりません。
PHPの自動型変換は時に相当不可解な振舞いを見せてくれるので注意が必要です。
PR
