Rainbow Engine

IT技術を分かりやすく簡潔にまとめることによる学習の効率化、また日常の気付きを記録に残すことを目指します。

Java JavaScript JSP/Servlet

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

投稿日:2021年12月8日 更新日:

 

<目次>

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

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

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

(1-1) 構文

(構文)

//# (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」で改行を入れている事がポイントです。

目次にもどる

(1-2) サンプルプログラム

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

(図121)

●入力画面の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>
 
(図122)

●出力画面の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>
(図123)
 

Adsense審査用広告コード


Adsense審査用広告コード


-Java, JavaScript, JSP/Servlet

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

EARファイル・WARファイル・JARファイルの違いや特徴について

  <目次> (1) EARファイル・WARファイル・JARファイルの違いや特徴について  (1-1) JARファイルとは(.jar)  (1-2) WARファイル(.war)  (1-3) …

TwitterのAPIでハッシュタグからツイートを探すJavaプログラムのご紹介

<目次> (1) TwitterのAPIでハッシュタグからツイートを探すJavaプログラムのご紹介  (1-1) プログラムの概要  (1-2) サンプルプログラム  (1-3) 操作イメージ (1) …

JSP Servletでセッションの有効期限を設定する方法

<目次> (1) JSP Servletでセッションの有効期限を設定する方法  (1-1) セッションの有効期限設定の概要  (1-2) 方法1:web.xmlに追記する方法  (1-3) 方法2:プ …

JavaScriptでテキストボックスの値を取得する方法(動画解説付き)

<目次> (1) JavaScriptでテキストボックスの値を取得する方法 (2) 表記例①:document.[Form Name].[Element Id].Value  (2-1) 構文  (2 …

JavaScriptのselfとは?thisとの違いや性質について

<目次> (1) JavaScriptのselfとは?thisとの違いや性質について  (1-1) JavaScriptのselfとは?  (1-2) selfとthisとの違い  (1-3) 補足 …

  • English (United States)
  • 日本語
Top