登録時にクライアントとサーバでデータの入力チェックを行う方法

誤って不正なデータを登録してしまうのを防ぐために、ユーザが入力した内容をチェックする処理を実装します。

商品名と単価が未入力の場合と、同じ商品名がすでに登録されていた場合はアラートでエラーメッセージを表示して、登録処理は行わないようにします。

クライアント側でのチェック

テキストボックスに値が入力されているかどうかのチェックはクライアント側の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番目の例ではアラート処理は常にクライアント側に出力されますが、他の出力された値によってアラート処理を実行するかどうかをクライアント側で判断しています。


関連記事

  • WEBアプリの基本的な仕組みと考え方

    WEBアプリの基本的な仕組みを説明します。まずは、WEBアプリで頻繁に登場する用語の説明を交えながら、ホームページの仕組みについて復習します。わかりやすくするためにかなり噛み砕いて説明しているため、実...


  • サーバ処理でクライアントからの情報を取得する方法

    クライアント側からサーバ側への送信処理は実装できたので、次はサーバ側でデータの登録を行う処理を実装します。まず、サーバ処理でデータの登録処理を実装しますが、その際、最初の初期表示としてアクセスされたの...


  • ホームページの問題点とサーバ処理の基本と必要性

    サーバ処理について説明します。下記のように、商品一覧を表形式で出力しているホームページがあるとします。サーバ処理でhtmlファイルをそのまま出力している場合は、新たに商品を追加したり、商品の値段が変わ...


  • ホームページの基本的な仕組みと考え方

    はじめに、ホームページの基本的な仕組みを説明します。どちらもWEB上にあり、ウェブブラウザを用いて閲覧します。両者の違いはというと、厳密に定義されているわけではないと思いますが、ホームページとは基本的...


  • GETとPOSTの違い

    formのmethod属性には、GETとPOSTの2種類があります。method属性では送信(リクエスト)の方法を指定しています。何も指定しない場合はGETで送信されます。URLを入力して直接画面遷移...


  • 地附山で自然に触れ合い心も体もリフレッシュ

    日常から抜けだして、自然に触れて心も体もリフレッシュしたいなら、長野県の地附山がおすすめです。トレッキングというよりもハイキングのような感じで、登山装備もいらずに気軽に歩けるのでおすすめスポットです。...


  • 須坂市の絶景スポット米子大瀑布の紹介

    8月の新緑の季節に行ってきました長野県須坂市の米子大瀑布の、壮大な自然が絶景でとても感動したので紹介します。米子大瀑布は、須坂市の山中にある2つの滝です。米子大瀑布にあるこれらの滝は日本の滝百選に選ば...


  • WOWOWを自動音声通話で解約したが翌月になっても見れてしまったとき

    WOWOWの解約は電話で行いますが、回線が混み合っているときは自動音声案内で解約することができます。先月、WOWOWを解約するときに、自動音声案内で解約したのですが、翌月の1日に一応「ちゃんと解約でき...


  • WOWOWはチューナーやアンテナ不要ですぐに見れます

    私の周りでは見たいけど番組があるがWOWOWを契約するのを迷っている人が結構います。チューナーやアンテナなどを設置になければ見られないと思っている人や、申込み後に何週間も待たないと見られないと思ってい...


  • Windows7から10に無料でアップグレードする手順(2019年12月更新)

    Windows 7のサポート終了が2020年1月に迫っています。私の周りではWindows 10の新しいパソコンに買い換える人が多いですが、実はWindows 7から10に無料でアップグレードすること...