JavaScriptの必須チェックのサンプルプログラム

＜目次＞

(１) JavaScriptの必須チェックのサンプルプログラム
　 (１-１) 構文
　 (１-２) サンプルプログラム

(１) JavaScriptの必須チェックのサンプルプログラム

「必須チェック」は必須の項目が入力されているか？のチェックし、未入力の場合はエラーとするチェックです。今回はクライアント側（JavaScript）で必須チェックを実装した例をご紹介します。

(１-１) 構文

（構文）

//# (1) 必須入力チェック
//# (1-1) フォームの情報を取得
var form = document.getElementById("testform");

//# エラーメッセージ格納用の変数
var errmsg = "";

//# (1-2) フォームの各要素をループ
for(var i=0; i < form.elements.length; i++){

    //# (1-2-1) 必須項目かどうか？のチェック
    if(form.elements[i].hasAttribute("required")){

        //# (1-2-1-1) 必須項目の値が空白なら
        if(form.elements[i].value.trim()==""){

            //# (1-2-1-1-1) エラーメッセージに追記
            errmsg = errmsg + "必須項目「" + getLabel(form.elements[i]) + "」が入力されていません\n";
        }
    }
}

（構文説明）

・(1-1) フォームの情報を取得

変数formに<form>エリアの情報（ユーザが入力した情報）を取得＆格納しています。

・(1-2) フォームの各要素をループ

form内の要素（テキスト/ラジオボタン/プルダウン等）の数は「[フォーム].elements.length」で取得できます。

・(1-2-1) 必須項目かどうか？のチェック

項目が必須かどうか？はhasAttributeメソッドを使って判断します。<input>タグで「required」属性を指定した場合に、hasAttribute(“required”)でヒットします。

つまり、入力必須としたい<input>の項目に対して「required」属性を付与します。

（例）

<input type="text" id="firstnm" name="firstname" required>

・(1-2-1-1) 必須項目の値が空白なら

form.elements[i].valueでi番目の要素の値（文字列）を取得し、trim()関数で空白詰めした結果が「空白」かどうかチェックしています。つまり、値が空白かどうか（未入力か？）を判定しています。

・(1-2-1-1-1) エラーメッセージに追記

項目数だけ繰り返すので、最後に「\n」で改行を入れている事がポイントです。

＞目次にもどる

(１-２) サンプルプログラム

今回はJSPで簡単な入力画面を作り、それに対して「必須チェック」をJavaScriptで実装します。必須項目を入力した上で「送信」を押すと、結果画面に遷移します（入力内容が表示されるだけ）。

（図１２１）

●入力画面のJSP

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="./css/IT0991_JspTextboxAlign.css">
<title>Validation Check Sample</title>
</head>
<body>
<script type='text/javascript' language='javascript'>
function TestValidation(){
  //############################################
  //# (1) 必須入力チェック
  //############################################
  //# (1-1) フォームの情報を取得
  var form = document.getElementById("testform");
  //# エラーメッセージ格納用の変数
  var errmsg = "";
  //# (1-2) フォームの各要素をループ
  for(var i=0; i < form.elements.length; i++){
    //# (1-2-1) 必須項目かどうか？のチェック
    if(form.elements[i].hasAttribute("required")){
      //# (1-2-1-1) 必須項目の値が空白なら
      if(form.elements[i].value.trim()==""){
        //# (1-2-1-1-1) エラーメッセージに追記
        errmsg = errmsg + "必須項目「" + getLabel(form.elements[i]) + "」が入力されていません\n";
      }
    }
  }
  //# (1-3) エラーなし→次画面に遷移
  if(errmsg == ""){
    form.submit();
  }
  //# (1-4) エラーあり→警告を出力
  else{
    window.alert(errmsg);
  }

  //# (補助) 指定した要素のラベル名を取得
  function getLabel(elem){
    return document.querySelector('label[for="'+elem.id+'"]').textContent;
  }
}
</script>
<form method="POST" action="ITxxxx_ValidationCheckSample2.jsp" id="testform" >
  <label for="firstnm">氏</label>：<input type="text" id="firstnm" name="firstname" required><br />
  <label for="lastnm">名</label>：<input type="text" id="lastnm" name="lastname" required><br />
  <label for="telephone">電話番号</label>：<input type="text" id="telephone" name="tel" ><br />
  <label for="age">年齢</label>：<input type="text" id="age" name="age" ><br />
  <label>送信：</label><input type="button" onclick="TestValidation()" value="送信"/>
</form>
</body>
</html>

（図１２２）

●出力画面のJSP（おまけ）

出力画面は今回のテーマに絡む要素は特にありませんが、必須チェックを通過した後の遷移先の画面として、一応セットで掲載しておきます。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="./css/IT0991_JspTextboxAlign.css">
<title>Validation Check Sample</title>
</head>
<body>
</br>
<label>氏：</label><input type="text" disabled value="<%=request.getParameter("firstname")%>"><br />
<label>名：</label><input type="text" disabled value="<%=request.getParameter("lastname")%>"><br />
<label>電話番号：</label><input type="text" disabled value="<%=request.getParameter("tel")%>"><br />
<label>年齢：</label><input type="text" disabled value="<%=request.getParameter("age")%>"><br />
<br />
 <a href="ITxxxx_ValidationCheckSample.jsp">＞前画面に戻る</a>
</body>
</html>

（図１２３）

＞目次にもどる