(jQuery版) フォームの入力内容をチェックしてエラーメッセージ表示。

jQueryを使って、フォームのinput要素とtextarea要素の入力内容をチェックしてエラーメッセージを表示する方法。(必須フィールドが未入力ならエラーにする。)

フィールドが未入力かどうか以外を調べる正規表現を使ったバリデーションの方法は別記事を参照。

ライブラリーを使わずにネイティブJavaScript(Vanilla JavaScript)だけで実装する方法は前の記事を参照。

HTMLのマークアップとCSSの設定

入力チェックが必要なフィールドの要素に任意のクラス名(「field-required」)を付け、その要素に入力されている値をjQueryで取得してエラーチェックする。

HTML

input要素とtextarea要素にはCSSの疑似要素が使えないのでdiv要素で囲い、エラーメッセージはdiv要素の疑似要素で表示させる。

<form id="form-vali" action="送信先URL" method="送信メソッド">
	<div class="block-form-required">
		<input class="field-required" type="text" name="name" placeholder="名前">
	</div>
	<div class="block-form-required">
		<input class="field-required" type="email" name="email" placeholder="メールアドレス">
	</div>
	<div class="block-form-required">
		<input class="field-required" type="tel" name="tel" placeholder="電話番号">
	</div>
	<div class="block-form-required">
		<textarea class="field-required" name="message" cols="50" rows="10"></textarea>
	</div>
	<button id="button-submit" type="submit">送信</button>
</form>

CSS

エラー用のクラス名(「field-invalid」)が動的に付加された場合の表示。

疑似要素でエラーメッセージを表示させ、子要素(「.field-required」)のフィールドを赤枠にする。

.field-invalid::before {
	content: "このフィールドは必須です。";
	display: block;
	color: red;
}
.field-invalid input.field-required,
.field-invalid textarea.field-required {
	border: 1px solid red;
}

jQueryで実装

「submitボタンをクリックしたとき」、または「入力フィールドからフォーカスが外れたとき」に入力内容を確認してエラーチェック。

• 入力内容が空だった場合はエラーと判定して、動的にエラー用のクラス名を付与する。
• 「submitボタンがクリックされたとき」のチェックでエラーが無ければ、そのままフォーム送信を実行する。

const $formEle = $('#form-vali'),//form要素
		$submitButton = $('#button-submit'),//submitボタン
		$formRequired = $('.block-form-required');//入力フィールドの親div要素
const fieldRequired = 'field-required',//必須フィールドに付けたクラス名
		fieldInvalid = 'field-invalid';//エラー判定のとき動的に付加するクラス名
let fieldValue,
	validFlg;
const ag2formVlidation = {
	all: function(){
		validFlg = true;
		$formRequired.each(function(i){
			let $this = $(this);
			fieldValue = $this.find('.'+fieldRequired).val();
			if(!fieldValue){
				validFlg = false;
				if(!$this.hasClass(fieldInvalid)) $this.addClass(fieldInvalid);
			}else{
				if($this.hasClass(fieldInvalid)) $this.removeClass(fieldInvalid);
			}
		});
		return validFlg;
	},
	each: function(e){
		let $this = $(e.target);
		fieldValue = $this.val();
		let thisParent = $this.parent();
		if(!fieldValue){
			if(!thisParent.hasClass(fieldInvalid)) thisParent.addClass(fieldInvalid);
		}else{
			if(thisParent.hasClass(fieldInvalid)) thisParent.removeClass(fieldInvalid);
		}
	}
};
const ag2submit = function(){
	if(ag2formVlidation.all()) $formEle.submit();
	return false;
};
$submitButton.on('click', ag2submit);
$('.'+fieldRequired).on('blur', ag2formVlidation.each);

要素.each(‘コールバック関数’) : 指定したすべての要素(jQueryオブジェクト)ひとつひとつに対してコールバック関数を実行する。コールバック関数の第1引数で、実行されている要素のindex番号を取得できる。

要素.find(‘CSSセレクター’) : 指定した要素の子要素の中で指定したCSSセレクターにマッチする要素を選択。

要素.val() : 指定した要素のvalue属性の値を取得。引数を指定した場合は、value属性の値を設定。

要素.hasClass(‘文字列’) : 指定した要素が指定した文字列をクラス名に持っていれば「true」、持っていなければ「false」を返す。

要素.addClass(‘文字列’) : 指定した要素に指定した文字列をクラス名として追加。

要素.removeClass(‘文字列’) : 指定した要素から指定した文字列のクラス名を削除。

要素.parent() : 指定した要素の直接の親層を選択。引数にCSSセレクターが指定されていれば、マッチする場合のみ取得する。(親要素だけでなく先祖要素を対象にする場合はparents()メソッドでCSSセレクターを指定して取得する。)

form要素.submit() : form要素に設定されている送信時の処理が実行される。引数に関数を指定すれば、送信処理時に指定した関数が実行される。