Web技術系中心に割と何でも更新中

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

Programming Web

Web制作者

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

こういった要望にお応えします。

本記事の内容

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

こんにちは、mineです。
Web制作歴は7年になります。

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で送信前に共通エラーチェック関数を呼び出す

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

おすすめ記事 【体験談】弁護士の退職代行で有給30日分を取得した話

おすすめ記事 「知らないから落ちる面接の4点減点法」で面接に挑んだ結果