(ネイティブJavaScript版) フォームの入力内容をチェックしてエラーメッセージ表示。

HTML5でフォーム内の要素に付加したrequired属性でのバリデーションが効かないことがあったので、JavaScriptでバリデーションする方法のメモ。(JavaScriptでフォームの入力内容をチェックしてエラーメッセージを表示する方法。)

HTML5の「required属性」によるバリデーションは、下記のどれかで機能しなくなる。(挙動を確認したもの。)

• form要素に「novalidate属性」がある場合。
• input要素やbutton要素に「formnovalidate属性」がある場合。(form要素の「novalidate属性」より優先される。)
• submitボタンのイベントをJavaScriptの「preventDefault()メソッド」で制御している場合。
• HTML5によるバリデーションが発火する前にJavaScriptでform要素に「submit()メソッド」を実行している場合。

[ HTMLのrequired属性を使わずにJavaScriptでバリデーションを実装する手順 ]

1. 「submitボタンをクリックしたとき」、または「入力フィールドからフォーカスが外れたとき」に処理を実行。
2. 各フィールドの入力内容を取得してエラー判定。
3. エラーだった場合、動的に任意のクラス名をフィールドの要素に付加。(指定のクラス名にCSSの疑似要素でエラーメッセージを表示。)
4. すべてのフィールドにエラー判定が無ければform要素でsubmit()メソッドを実行してフォームを送信。

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

HTMLを記述する段階で、入力内容のチェックが必要なフィールド要素に任意のクラス名を付けておく。(ここでは「field-required」を付加。)

※ JavaScriptで、その要素に入力されている値を動的に取得してエラーチェックする。

HTMLのマークアップ

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

エラー判定した場合、入力フィールドの親div要素(「.block-form-required」)にJavaScriptで動的にクラス名(「field-invalid」)を付加する。

※ JavaScriptで要素を生成してDOMに挿入するのが面倒なので、エラーメッセージ表示にはCSSの疑似要素を使う。

<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」)のフィールドを赤枠にするCSSの記述。

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

JavaScriptで入力内容を確認してエラー判定の実装

JavaScriptで入力された内容のチェックを行い、エラー判定にした場合に動的にクラス名を付与する。

1. 入力内容をバリデーションする関数を作成。
2. submitボタンの「click」イベント、または入力フィールドの「blur」イベントで関数を実行。
3. 内容チェックの結果によって、エラーメッセージ表示かフォーム送信の分岐処理。(下記では、「入力内容が空か空ではないか」のみをチェック。)

※ バリデーションの実行タイミングとなる入力フィールド関連のイベントは、実装の必要に応じて下記を使い分ける。

• 「blur」イベント : フォーカスが外れたときに発火。
• 「focus」イベント : フォーカスしたときに発火。
• 「change」イベント : フォーカスしたときとフォーカスが外れたときで入力内容に変化があれば発火。
• 「input」イベント : 1文字入力されるごとに発火。

ネイティブJavaScript(Vanilla JavaScript)で実装

ライブラリーを使わずネイティブJavaScript(Vanilla JavaScript)だけで実装する方法。

※ jQueryを使った方法は別記事を参照。

1. 必要な要素をDOMから取得、処理に使用する変数を宣言。

//DOMから指定要素を取得
const formEle = document.getElementById('form-vali'),//form要素
	submitButton = document.getElementById('button-submit'),//submitボタン
	formRequired = document.querySelectorAll('.block-form-required');//フィールドの親div要素

//使用するクラス名
const fieldRequired = 'field-required',//必須フィールドに付けたクラス名
	fieldInvalid = 'field-invalid';//エラー判定のとき動的に付加するクラス名

//エラー判定で使用する変数を宣言
let fieldValue,
	validFlg;

//フィールドの親div要素の数を取得
const formRequiredLength = formRequired.length;

document.getElementById(‘ID’) : 指定されたIDに一致する要素を表すElementオブジェクトを返す。無ければ「null」を返す。

document.querySelector(‘セレクター’) : 指定したCSSセレクターを取得する。最初に一致したHTMLElementオブジェクトだけを返す。無ければ「null」を返す。

Nodelistオブジェクト.length : Nodelist内のitemの数を返す。

2. バリデーションの関数を作成。

「エラーの判定」と「動的にクラス名を付与・削除」する関数。

1. 各入力フィールドのvalueの値を取得。
2. 取得したvalueの値が空ならエラーと判定。
3. エラーがあればフラグ用の変数「validFlg」に「false」を代入し、該当要素にエラー用のクラス名を付与。
4. すべてのフィールドにエラーが無ければ変数「validFlg」は「true」を保持。

const ag2formVlidation = {
	//clickイベントですべてのフィールドのチェック用
	all: function(){
		//フラグをtrueにする
		validFlg = true;
		for(let i = 0; i < formRequiredLength; i++){
			//親div要素内からクラス名指定でvalue値を取得
			fieldValue = formRequired[i].getElementsByClassName(fieldRequired)[0].value;
			if(!fieldValue){
				//取得した値が空ならフラグをfalseにする
				validFlg = false;
				//親div要素にエラー表示用クラス名を付与
				if(!formRequired[i].classList.contains(fieldInvalid)) formRequired[i].classList.add(fieldInvalid);
			}else{
				//取得した値が空でなければ親div要素からエラー用クラス名を削除
				if(formRequired[i].classList.contains(fieldInvalid)) formRequired[i].classList.remove(fieldInvalid);
			}
		}
		return validFlg;
	},
	//blurイベントで個別にフィールドのチェック用
	each: function(event){
		//イベントが発火した要素を取得
		let thisField = event.target;
		fieldValue = thisField.value;
		if(!fieldValue){
			if(!thisField.parentNode.classList.contains(fieldInvalid)) thisField.parentNode.classList.add(fieldInvalid);
		}else{
			if(thisField.parentNode.classList.contains(fieldInvalid)) thisField.parentNode.classList.remove(fieldInvalid);
		}
	}
};

input要素.value : input要素を操作するためのHTMLInputElementインターフェイスのプロパティー。value属性の値を返す。任意の値を代入して設定することもできる。

要素.classList : 要素のclass属性を返す読み取り専用のプロパティー。DOMTokenListのコレクション。

要素.classList.contains(‘クラス名’) : 要素のclassList(DOMTokenList)に指定したクラス名が含まれていれば「true」、無ければ「false」を返す。

要素.classList.add(‘クラス名’) : 指定されたクラス名を要素のclassListに追加する。

要素.classList.remove(‘クラス名’) : 指定されたクラス名を要素のclassListから削除する。

event.target : イベントを発生させたオブジェクトへの参照。オブジェクトはその情報をプロパティーに持つ。

ノード.parentNode : 指定されたノードのDOMツリー内の親ノードを返す。要素の親ノードは、Elementノード、Documentノード、またはDocumentFragment。

3. submitボタンで「click」イベントが発生したときの処理。

submitボタンのイベントリスナーに、バリデーションとエラーが無ければ送信まで実行する関数を登録する。

//submitボタン用の関数を作成
function ag2submit(event){
	//通常の動作をキャンセル
	event.preventDefault();
	//バリデーションの関数(すべてのフィールドをチェック)を実行
	//返り値がtrueならform要素にsubmit()メソッドで送信処理
	if(ag2formVlidation.all()) formEle.submit();
}
//submitボタンのクリックイベントに上記の関数を登録
submitButton.addEventListener('click', ag2submit);

event.preventDefault() : eventオブジェクトのメソッド。発生したイベントの規定の動作を行わない。イベントの伝播は止めない。

document.フォーム要素.submit() : 指定したフォームを送信する。

対象要素.addEventListener(‘イベントのタイプ’, ‘関数’, ‘イベント伝播順’) : 対象要素に指定のイベントでコールする関数を指定して登録。第3引数(初期値 : false)でイベントの伝播する方向を指定できる。falseでDOM階層の下位から上位に伝播。

4. 入力フィールドで「blur」イベントが発生したときの処理。

クラス名が「field-required」のすべての要素(各入力フィールド)のイベントリスナーにバリデーションを実行する関数を登録する。

//バリデーションの関数(個別にフィールドをチェック)を登録
for(let i = 0; i < formRequiredLength; i++){
	formRequired[i].getElementsByClassName(fieldRequired)[0].addEventListener('blur', ag2formVlidation.each);
}

正規表現でバリデーション

「入力フィールドが未入力かどうか」以外の条件でエラー判定する場合に、JavaScriptの正規表現でバリデーションする方法は別記事を参照。