Rainbow Engine

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

Java JavaScript JSP/Servlet

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

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

 

<目次>

(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

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

関連記事

Javaの継承やオーバーライドとは?特徴の解説とサンプルプログラムの紹介

(0)目次&概説 (1) 継承/Inherit  (1-1) 継承とは?  (1-2) 継承の特徴  (1-3) 継承のサンプルコード   (1-3-1) Carクラス   (1-3-2) Truck …

JavaのJDBC接続でjava.sql.SQLRecoverableException: Closed Connectionが発生した時の解決メモ

(0)目次&概説 (1) エラー事象の概要  (1-1) エラーの発生状況  (1-2) エラーメッセージ全文 (2) エラーの原因 (3) エラーの対処方法  (3-1) エラーの修正内容  (3- …

JavaのhashCode()で31を掛け算する理由について

<目次> (1) JavaのhashCode()で31を掛け算する理由について  (1-1) ハッシュの計算のソースコード  (1-2) ソースコードに登場する代表的な変数  (1-3) ソースコード …

TomcatでEclipseを使う際にserver.xmlを編集しても上書きされる事象の対処方法

<目次> (1) TomcatでEclipseを使う際にserver.xmlを編集しても上書きされる事象の対処方法  (1-1) 発生状況・エラーメッセージ  (1-2) 原因  (1-3) 対処法 …

JavaScriptでpopstateイベントが動かない?発動タイミングやサンプルプログラムをご紹介

  <目次> (1) JavaScriptでpopstateイベントが動かない?発動タイミングやサンプルプログラムをご紹介  (1-1) 概要  (1-2) 構文  (1-3) サンプルプロ …

  • English (United States)
  • 日本語
Top