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

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

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

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

テキストボックスに値が入力されているかどうかのチェックはクライアント側の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アプリで頻繁に登場する用語の説明を交えながら、ホームページの仕組みについて復習します。


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

    classic aspで登録時にクライアントとサーバでデータの入力チェックを行う方法について説明します。誤って不正なデータを登録してしまうのを防ぐために、ユーザが入力した内容をチェックする処理を実装し...


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

    サーバ処理でhtmlファイルをそのまま出力している場合は、データが変わるごとに、htmlファイルを書き換えなければなりません。


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

    ホームページとWEBアプリケーションの違いは、ホームページとは基本的に作成者が一方的に情報を公開するサイトのことを差します。


  • GETとPOSTの違い

    GETとPOSTの違いについて説明します。formのmethod属性には、GETとPOSTの2種類があります。method属性では送信(リクエスト)の方法を指定しています。何も指定しない場合はGETで...


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

    classic aspでサーバ処理でクライアントからの情報を取得する方法について説明します。クライアント側からサーバ側への送信処理は実装できたので、次はサーバ側でデータの登録を行う処理を実装します。


  • cssで三角形を表示する方法

    画像を使わずに、cssでスタイルを指定するだけで三角形を表示させる方法を紹介します。三角形を表示させるにはborder(枠線)を使用します。縦と横が重なる部分は、どちらかのスタイル(青か赤)を優先させ...


  • 唐松岳・八方尾根に日帰り登山レビュー

    唐松岳に日帰り登山に行ってきました。登山道は森の中を歩く箇所は少なく、ほとんど開けた場所で、風が下から吹いてきてとても気持ちが良いです。途中までリフトが使えることや、道がとても歩きやすいことから、唐松...


  • canvasのアニメーションで軌跡・残像・フェードアウトを表現する

    アニメーションを応用し軌跡や残像を残したり。フェードアウトする方法を紹介します。軌跡を残すためにはクリアする処理をなくす必要があります。クリアをしなければ、前回描画した状態に対して追記する形になるため...


  • LaravelのElixirでbrowserSyncを導入する

    LaravelのElixirでビルド後にブラウザを自動で再表示するために、browserSyncを導入しました。browserSyncをするためには「laravel-elixir-browsersyn...