マイクラ（Java版）の情報ブログ
☰
MINEBLOG

その他

【jQuery】入力チェックとエラーメッセージ表示機能を実装する方法

お問い合わせ

この記事の概要

Web制作者Web制作者

問い合わせフォームで入力チェックをしたい。入力フォーム未入力の時にエラーメッセージを表示させたい。

管理人管理人

jQueryを使用することで、問い合わせフォームの入力チェックおよび未入力時のエラーメッセージ表示を実現できます。詳しく説明します！

本記事の内容

  • 入力フォームにjQueryで入力チェックとエラーメッセージを表示する方法

Web制作をしていると、問い合わせ・会員登録などの入力フォームなどを作成する機会があります。特に必須項目については入力チェックをしておきたいところです。

この記事ではjQueryで入力フォームの入力チェックと、エラーメッセージを表示する方法をご紹介します。

エラーチェックおよびエラーメッセージ表示機能の仕様

この記事で実装できる機能の仕様は下記のとおりです。

実装する機能

  • フォームの入力チェック
  • エラーメッセージの表示
  • 上2つの処理を入力フォーカスが外れたときと、送信ボタンを押した時に行う

フォームの中で代表的なものを5タイプ用意して、各々チェックを行うようにします。
今回は未入力・未選択のほかに少しチェック条件を加えています。※（）内が追加条件

入力フォームのタイプ一覧

  • テキストボックス<input type="text">（50文字以内、スペース改行のみは未入力とみなす）
  • セレクトボックス<select>
  • ラジオボタン<input type="radio">
  • チェックボックス<input type="checkbox">（1つ以上チェックをいれる）
  • テキストエリア<textarea>（1000文字以内）

テキスト入力・項目選択時および送信ボタンクリック時に、入力されているかをチェックし各々適したエラーメッセージを表示します。

<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js?ver=1.11.3'></script>

前提としてjQueryを<head>内に記述します。

フォーカスが外れた時のチェック機能の実装方法

具体的にチェック機能の実装方法をフォームのタイプごとにご紹介します。
今回は、CSSによる装飾については特に触れません。

イメージ

フォーカスが外れた時のイメージ

こんな感じでフォームからフォーカスが外れた時に入力チェックして、エラーメッセージを表示します。

基本的に、どのフォームのタイプでも構造は同じです。「フォームタグ要素」と「エラーメッセージ表示用の要素（err_text共通クラス）」の2つです。

また、「送信ボタン」クリック時にも再度入力チェックを行うようにしているので、チェック処理を関数化して使いまわせるようにします。これにより、関数の返り値はtrue/falseとなっており、「入力がOKかダメか」が返るようになっています。

これを踏まえて下記実装方法を見ると分かりやすいと思います。

テキストボックス

テキストボックスの入力チェック、エラーメッセージ表示機能の実装方法です。

HTML

<dl class="clearfix">
	<dt>テキストボックス</dt>
	<dd>
		<input type="text" class="input_textbox" id="textbox" name="textbox" value="">
		<div class="err_text" id="err_textbox"></div>
	</dd>
</dl>

jQuery

$(function(){
	$("#textbox").bind("blur", function() {
		var _textbox = $(this).val();
		check_textbox(_textbox);
	});
});

function check_textbox(str){
	$("#err_textbox p").remove();
	var _result = true;
	var _textbox = $.trim(str);

	if(_textbox.match(/^[ 　\r\n\t]*$/)){
		$("#err_textbox").append("<p><i class=\"fa fa-exclamation-triangle\"></i>テキストボックスを入力してください。</p>");
		_result = false;
	}else if(_textbox.length > 50){
		$("#err_textbox").append("<p><i class=\"fa fa-exclamation-triangle\"></i>テキストボックスは50文字以内で入力してください。</p>");
		_result = false;
	}
	return _result;
}

blurイベント発生時に、チェック関数をbindして、入力チェックとエラーメッセージ表示処理を行っています。

入力チェックは、.match()で入力しているかどうか、.lengthで文字数の上限を超えていないかのチェックを行っています。

前述の通り/^[ 　\r\n\t]*$/のような正規表現を使用してスペースや改行のみの場合も未入力とみなすようにしています。

セレクトボックス

セレクトボックスの入力チェック、エラーメッセージ表示機能の実装方法です。

HTML

<dl class="clearfix">
	<dt>セレクトボックス</dt>
	<dd>
		<label class="select_label">
			<select class="input_category" id="list_id" name="list_id">
				<option value="">リストを選択してください</option>
				<option value="1">項目1</option>
				<option value="2">項目2</option>
				<option value="3">項目3</option>
			</select>
		</label>
		<div class="err_text" id="err_category"></div>
	</dd>
</dl>

jQuery

$(function(){
	$("#list_id").bind("change blur", function(){
		var _list_id = $(this).val();
		check_list_id(_list_id);
	});
});

function check_list_id(id){
	$("#err_category p").remove();
	var _result = true;
	var _id = id;

	if(!_id.match(/^[0-9]+$/)){
		$("#err_category").append("<p><i class=\"fa fa-exclamation-triangle\"></i>リストを選択してください。</p>");
		_result = false;
	}
	return _result;
}

blur、changeイベント発生時に、チェック関数をbindして、入力チェックとエラーメッセージ表示処理を行っています。

入力チェックは、valueが半角数字という前提で、.match()で項目を選択しているかどうか正規表現によるチェックを行っています。

ラジオボタン

ラジオボタンの入力チェック、エラーメッセージ表示機能の実装方法です。

HTML

<dl class="clearfix">
	<dt>ラジオボタン</dt>
	<dd>
		<input type="radio" id="radio_item1" class="radio_item" name="radio_item" value="1">
		<label for="radio_item1" class="select_radio">
			<span>ラジオボタン1</span>
		</label>
		<input type="radio" id="radio_item2" class="radio_item" name="radio_item" value="2">
		<label for="radio_item2" class="select_radio">
			<span>ラジオボタン2</span>
		</label>
		<div class="err_text" id="err_radio_item"></div>
	</dd>
</dl>

jQuery

$(function(){
	$("input[name='radio_item']").bind("change", function(){
		var _radio_item = $("input[name='radio_item']:checked").val();
		check_radio_item(_radio_item);
	});
});

function check_radio_item(type){
	$("#err_radio_item p").remove();
	var _result = true;
	var _type = type;

	if(_type == undefined || !_type.match(/^[0-9]+$/)){
		$("#err_radio_item").append("<p><i class=\"fa fa-exclamation-triangle\"></i>ラジオボタンを選択してください。</p>");
		_result = false;
	}
	return _result;
}

changeイベント発生時に、チェック関数をbindして、入力チェックとエラーメッセージ表示処理を行っています。ラジオボタンは「選択されているラジオボタンの値」を取得して、チェックを行います。

入力チェックは、valueが半角数字という前提で、.match()で項目を選択しているかどうか正規表現によるチェックを行っています。この場合、選択されていない場合のみエラーメッセージを表示させるようになっています。

チェックボックス

チェックボックスの入力チェック、エラーメッセージ表示機能の実装方法です。

HTML

<dl class="clearfix">
	<dt>チェックボックス</dt>
	<dd>
		<input type="checkbox" id="checkbox1" name="checkbox" value="1">
		<label for="checkbox1" class="select_check">
			<span>チェックボックス1</span>
		</label>
		<input type="checkbox" id="checkbox2" name="checkbox" value="2">
		<label for="checkbox2" class="select_check">
			<span>チェックボックス2</span>
		</label>
		<div class="err_text" id="err_checkbox"></div>
	</dd>
</dl>

jQuery

$(function(){
	$("input[name='checkbox']").bind("change", function(){
		check_checkbox();
	});
});

function check_checkbox(){
	$("#err_checkbox p").remove();
	var _result = true;
	var _check_count = 0;

	$("input[type='checkbox']").each(function(){
		if($(this).prop('checked')){
			_check_count = _check_count+1;
		}
	});
	if(_check_count == 0){
		$("#err_checkbox").append("<p><i class=\"fa fa-exclamation-triangle\"></i>チェックボックスを1つ以上選択してください。</p>");
		_result = false;
	}
	return _result;
}

changeイベント発生時に、チェック関数をbindして、入力チェックとエラーメッセージ表示処理を行っています。

チェックボックスは、どれか一つでもチェックが入っていれば入力OKなので、.eachメソッドを使用してチェックされているチェックボックスの数をカウントして、カウントが0の時にエラーメッセージを表示させています。

テキストエリア

テキストエリアの入力チェック、エラーメッセージ表示機能の実装方法です。

HTML

<dl class="clearfix">
	<dt>テキストエリア</dt>
	<dd>
		<textarea class="input_textarea" id="textarea" name="textarea" placeholder="テキストエリア（1000文字以内）" style="overflow: hidden; overflow-wrap: break-word; height: 150px;"></textarea>
		<div class="err_text" id="err_textarea"></div>
	</dd>
</dl>

jQuery

$(function(){
	$("#textarea").bind("blur", function() {
	var _textarea = $(this).val();
		check_textarea(_textarea);
	});
});

function check_textarea(str){
	$("#err_textarea p").remove();
	var _result = true;
	var _textarea = $.trim(str);

	if(_textarea.length == 0){
		$("#err_textarea").append("<p><i class=\"fa fa-exclamation-triangle\"></i>テキストエリアを入力してください。</p>");
		_result = false;
	}else if(_textarea.length > 1000){
		$("#err_textarea").append("<p><i class=\"fa fa-exclamation-triangle\"></i>テキストエリアは1000文字以内で入力してください。</p>");
		_result = false;
	}
	return _result;
}

「テキストボックス」で説明した内容とほぼ同じです。違いはは上限が1000文字であることぐらいでしょうか。

送信ボタンを押した時のチェック機能の実装方法

イメージ

送信ボタンを押した時のイメージ

こんな感じで送信ボタンを押した時に入力チェックして、エラーメッセージを表示します。

HTML

<div class="btn">
	<a href="javascript:void(0)" onclick="do_submit(this);" class="btn_transmit">送信</a>
</div>

onclickで送信ボタンクリック時に、do_submit関数を実行するように設置します。

jQuery

function do_check() {
	var result = true;
	var check_result = true;

	// エラーメッセージ初期化
	$(".err_text").empty();

	// テキストボックス
	var _textbox = $("#textbox").val();
	result = check_textbox(_textbox);
	if(!result){
		check_result = result;
	}

	// セレクトボックス
	var _list_id = $("#list_id").val();
	result = check_list_id(_list_id);
	if(!result){
		check_result = result;
	}

	// ラジオボタン
	var _radio_item = $("input[name='radio_item']:checked").val();
	result = check_radio_item(_radio_item);
	if(!result){
		check_result = result;
	}

	// チェックボックス
	result = check_checkbox();
	if(!result){
		check_result = result;
	}

	// テキストエリア
	var _textarea = $("#textarea").val();
	result = check_textarea(_textarea);
	if(!result){
		check_result = result;
	}

	if(!result){
		check_result = result;
	}

	return check_result;
}

function do_submit(btn){
	$(btn).css("pointer-events", "none");
	var result = do_check();

	if(result){
		alert("入力チェックOKです！");
	}else{
		$(btn).css("pointer-events", "inherit");
	}
}

「フォーカスが外れた時のチェック機能」は、入力フォーム単体のチェックだけでしたが、送信ボタンを押したときdo_submitが動作し、連動してすべての項目をチェックするための関数do_check()が動作します。

do_check()内の処理としては、入力フォーム単体のチェックで使用したそれぞれのチェック関数を呼び出して、一つずつチェックを行います。

各入力フォームチェック関数

  • check_textbox()関数（テキストボックス）
  • check_list_id()関数（セレクトボックス）
  • check_radio_item()関数（ラジオボタン）
  • check_checkbox()関数（チェックボックス）
  • check_textarea()関数（テキストエリア）

入力チェックに引っかかったときは、変数check_resultにfalseが入リます。

すべて入力がOKであれば「入力チェックOKです！」というアラートが表示されるようになっています。

まとめ

入力フォームのチェックとエラーメッセージを表示する方法について再度ポイントをまとめます。

ポイント

  • 入力フォームのタイプごとに共通エラーチェック関数を用意する
  • .bind()メソッドで、フォームからフォーカスが外れたときに共通エラーチェック関数を呼び出す
  • onclickで送信前に共通エラーチェック関数を呼び出す

少しコードが長くなってしまいましたが、一つづつ順を追って見ていけば理解するのは難しくないです。
問い合わせフォームや会員登録画面などで利用してみてください。

おすすめ記事
【マイクラ】ディープダーク・古代都市の探し方や特徴【スカルク系ブロック・敵対Mobウォーデン】
【マイクラ】アレイの特徴と探し方【ピリジャーの前哨基地・森の洋館】
【マイクラ1.20】桜バイオームの特徴、新ブロック・アイテムを紹介【サクラの林】
【マイクラ1.20】鍛冶型による防具装飾の仕様と方法を紹介【防具装飾用鍛冶型・ネザライト強化用鍛冶型】
【マイクラ1.20】考古学の要素を紹介（トレイル遺跡、模様入りの壺、ブラシ、怪しげな砂／砂利）
【マイクラ1.20】古代のMobスニッファーとトーチフラワー・ウツボカズラなどの植物を紹介
郵便番号から住所を自動入力してくれるJavaScriptライ...

その他

【jQuery】スクロールして複数の要素を時間差でフェードイ...

その他

【jQuery】入力した任意の数値をカンマ区切り、数字桁を入...

その他

【WEB制作者向け】スマホサイトで画面がずれる6つの原因と対...

その他

jQueryを使用してチェックボックスのチェック数を制限させ...

その他

JavaScriptライブラリ「Masonry」の使い方【ギ...

その他

jQueryで領域外クリック時にポップアップを閉じる機能を実...

その他

CSSとjQueryで縦横比を判別して画像表示サイズを最適化...

その他

HOME >  その他 >  【jQuery】入力チェックとエラーメッセージ表示機能を実装する方法