登録時にクライアントとサーバでデータの入力チェックを行う方法
誤って不正なデータを登録してしまうのを防ぐために、ユーザが入力した内容をチェックする処理を実装します。
商品名と単価が未入力の場合と、同じ商品名がすでに登録されていた場合はアラートでエラーメッセージを表示して、登録処理は行わないようにします。
クライアント側でのチェック
テキストボックスに値が入力されているかどうかのチェックはクライアント側のjavascriptで行うことができます。
サーバ側でもチェックができますが、無駄なサーバへのアクセスを減らすために、クライアント側で入力チェックを行います。
ただし、クライアント処理はユーザが自由に変更できるので、セキュリティ面を考えると、入力チェックなどの処理はサーバ側でも同じように実装する必要があります。
<!DOCTYPE HTML>
<html>
<head>
<title>商品マスタ</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script Language="JavaScript">
function touroku(){
//クライアント側の入力チェック
if(document.frmMain.txtName.value==''){
alert('商品名を入力してください。');
return;
}
if(document.frmMain.txtPrice.value==''){
alert('単価を入力してください。');
return;
}
document.frmMain.submit();
}
</script>
</head>
<!-- 省略 -->
<form action="" method="post" name="frmMain">
商品名：<input type="text" name="txtName">
単価：<input type="text" name="txtPrice">
<input type="hidden" name="hidMode" value="1">
<input type="button" value="登録" onclick="touroku();">
</form>
<%= result %>
</body>
</html>サーバ側でのチェック
商品名が重複しているかどうかはデータベースにアクセスしなければ分かりません。
クライアント側でデータベースにアクセスはできないので、サーバ側でデータの登録前に商品名が重複しているかどうかのチェックを行います。
同じタイミングで、送信された商品名と単価が未入力でないかどうかのチェックも行います。
不正なデータだった場合は登録処理は行わずに、クライアント側でアラートを表示する処理を出力します。（サーバ側でアラートは出せません）
<%
dim result
dim errMsg = ""; '入力エラーチェック
dim errFlg = false '入力エラーがあればtrueにし、以降のサーバ処理は行わない
'サーバ処理でrequest.form("hidMode")=1のときのみ登録処理を行います
If request.form("hidMode") = "1" Then
'商品名と単価の未入力チェックを行います
If request.form("txtName") = "" Then
errFlg = true
errMsg = "商品名を入力してください。"
End If
If errFlg = false AND request.form("txtPrice") = "" Then
errFlg = true
errMsg = "単価を入力してください。"
End If
If errFlg = false Then
'商品名の重複チェックを行います
'SQLを実行して重複チェック
errFlg = true
errMsg = "入力した商品名はすでに登録されています。"
End If
If errFlg = false Then
'入力エラーがない場合のみデータの登録を行う
'データの登録処理
End If
End If
%>
<!DOCTYPE HTML>
<html>
<head>
<title>商品マスタ</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script Language="JavaScript">
function touroku(){
//クライアント側の入力チェック
if(document.frmMain.txtName.value==''){
alert('商品名を入力してください。');
return;
}
if(document.frmMain.txtPrice.value==''){
alert('単価を入力してください。');
return;
}
document.frmMain.submit();
}
function init(){
<% If errFlg = true Then %>
//入力エラーがあった場合のみアラートを表示する処理を出力します
alert('<%= errMsg %>');
<% End If %>
}
</script>
</head>
<body onload="init()"><!-- 入力エラーのアラートを表示するファンクションを実行する -->
<table class="common-table">
<caption>商品マスタ</caption>
<thead>
<tr>
<th>商品コード</th>
<th>商品名</th>
<th>単価</th>
</tr>
</thead>
<tbody>
<%
'SQLで取得したデータを1件ずつ出力する
response.write("<tr><td>" & Rs("商品コード") & "</td><td>" & Rs("商品名") & "</td><td>" & Rs("単価") & "</td>")
%>
</tbody>
</table>
<form action="" method="post" name="frmMain">
商品名：<input type="text" name="txtName">
単価：<input type="text" name="txtPrice">
<input type="hidden" name="hidMode" value="1">
<input type="button" value="登録" onclick="touroku();">
</form>
<%= result %>
</body>
</html>上記のソースではerrFlg=trueの場合のみクライアント側で「アラートを出力する処理」を出力しています。
javascriptの部分がサーバ処理とクライアント処理が混ざってしまい、分かりづらい場合は、下記のソースのように実装することもできます。
<!-- 省略 -->
<!DOCTYPE HTML>
<html>
<head>
<title>商品マスタ</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script Language="JavaScript">
function touroku(){
//クライアント側の入力チェック
if(document.frmMain.txtName.value==''){
alert('商品名を入力してください。');
return;
}
if(document.frmMain.txtPrice.value==''){
alert('単価を入力してください。');
return;
}
document.frmMain.submit();
}
function init(){
//クライアントのコントロールにエラーチェック結果を出力し、その値によってアラートを出力するかどうか判断します
if(document.frmMain.hidErr.value=="True"){
alert('<%= errMsg %>');
}
}
</script>
</head>
<body onload="init()"><!-- 入力エラーのアラートを表示するファンクションを実行する -->
<!-- 省略 -->
<form action="" method="post" name="frmMain">
商品名：<input type="text" name="txtName">
単価：<input type="text" name="txtPrice">
<input type="hidden" name="hidMode" value="1">
<input type="button" value="登録" onclick="touroku();">
</form>
<%= result %>
<input type="hidden" name="hidErr" value="<%= errFlg %>"> <!-- errFlgの値をhiddenコントロールに出力します -->
</body>
</html>上記のソースではエラーチェックの結果をhtmlのコントロールの値としてクライアント側に出力し、javascriptではクライアント側に出力された値を参照し、アラートを表示するかどうか判断しています。
入力エラーがない場合、最初の例ではアラート処理自体クライアント側に出力されません。
2番目の例ではアラート処理は常にクライアント側に出力されますが、他の出力された値によってアラート処理を実行するかどうかをクライアント側で判断しています。