エラーチェック
適切な値が入力されたかどうかをチェックするサンプル。
入力候補となるデータはサーバに保存されているので、実際のエラーチェック処理はサーバ側のプログラム(PHP)で行っています。
PHPプログラムでは、チェックした結果を「TRUE」または「FALSE」という文字列で返します。
PHPでは<?php ?>の前後に改行や空白があれば、それもデータとして送ってしまうので、それを防ぐためにContent-Lengthヘッダで文字数を指定します。
header("Content-Length: 4"); ← TRUEの場合
このサンプルでは、「America,China,Englnad,France,Germany,Italy,Japan,Korea」を入力候補とします。
PHPプログラム
<![CDATA[
＜?php
mb_internal_encoding('UTF-8');
mb_http_output('UTF-8');
// 入力文字を取得
$text = $_GET['txt'];
if( empty($text) ) {
exit;
}
// 候補の文字列
$data = file_get_contents("data/country.dat");
$country = split('[,]', $data);
// ヘッダを送信
header("Content-type: text/plain; charset=utf-8");
foreach($country as $value){
// 大文字と小文字の区別をせずに比較
if (strcasecmp( $value, $text ) == 0) {
header("Content-Length: 4");
echo "TRUE";
exit;
}
}
header("Content-Length: 5");
echo "FALSE";
?>
]]>
Ajax
<![CDATA[
// テキストボックスのデータが変更された場合の処理
function inputText(target){
// リクエストURL
var url = 'checkCountry.php';
// テキストボックスの値を取得
var textValue = target.value;
// GETデータ
var data = 'txt=' + encodeURIComponent(textValue);
// リクエスト
new Ajax.Request(url,
{
method: 'get',
onComplete: function(req) {
checkData(req, target);
},
parameters: data
});
}
// レスポンスデータを取得
function checkData( req, target ){
// レスポンスがFALSEの場合
if( req.responseText == "FALSE") {
// フォーカスを当てる
target.focus();
// 選択状態にする
target.select();
alert("国名をご確認ください");
}
}
]]>
HTML
<![CDATA[
<form>
<div>
国名1：
<input type="text" name="c1" id="c1" onchange="inputText(this)"/>
</div>
・
・
・
<p><input type="submit" value="送信"/></p>
</form>
]]>
CSVファイル
<![CDATA[
America,China,Englnad,France,Germany,Italy,Japan,Korea
]]>
＜参考＞Ajaxを使わない方法
Ajaxを使わない従来の方法では、起動時にPHPプログラムを呼び、読み込んだデータをJavaScriptの配列として、PHPプログラムが記述します。
PHPプログラム内で
<![CDATA[
for($i=0;$i<count($country);$i++){ echo "countryArray[{$i}] = '{$country[$i]}';"; } ]]>
と記述することにより、JavaScriptコードを生成しています。
JavaScriptプログラムでは
<script type="text/javascript" src="error_check.php"></script>
として、PHPプログラムをscriptとして読み込んでいます。実際のエラーチェックはJavaScriptで行います。
PHPファイル
<![CDATA[
// 国名配列
var countryArray = new Array();
＜?php
mb_internal_encoding('UTF-8');
mb_http_output('UTF-8');
// 国名ファイルを読み込む
$data = file_get_contents("data/country.dat");
// カンマで分割して配列に格納する
$country = split('[,]', $data);
// JavaScript用国名配列を作成する
for($i=0;$i<count($country);$i++){ echo "countryArray[{$i}] = '{$country[$i]}';"; } ?>
]]>
Ajax
<![CDATA[
// テキストボックスのデータが変更された場合の処理
function inputText(target){
flg = false;
var val = target.value.toLowerCase();
for(i=0;i<countryArray.length;i++){ if(val == countryArray[i].toLowerCase()){ flg = true; } } if(!flg){ // フォーカスを当てる target.focus(); // 選択状態にする target.select(); alert("国名をご確認ください"); } } ]]>
