【バリデーション】フォームの必須チェックを実装する方法
こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただくWEBサイトを制作しているフリーランスエンジニアの寺井です。
Web制作において、フォームのバリデーションは非常に重要です。ユーザーからの入力を適切に受け取るため、またユーザーに正しい形式で情報を提供させるためのガイドラインとして、バリデーションが必要とされています。特に、情報が必須である場合、その項目が欠落していないかを確認する”必須チェック”は基本中の基本です。今回のブログでは、様々なフォーム要素（テキストボックス、テキストエリア、セレクトボックス、ラジオボタン）に対する必須チェックの方法をJavaScriptとjQueryでの実装例とともに紹介します。
この記事の目次を表示
テキストフィールドの必須チェック
テキストフィールドの必須チェックを実装するためのサンプルとなるHTMLは以下をもとに解説します。テキストフィールドにはinput[type="text"]、input[type="url"]、input[type="tel"]などを想定しています。
HTML
<form id="myForm">
<input type="text" id="myInput">
<button type="submit">送信</button>
</form>
<div id="errorMessage" style="color: red;"></div>
JavaScriptで実装する方法
テキストフィールドの必須チェックをJavaScriptで実装する方法は以下になります。
document.getElementById("myForm").addEventListener("submit", function(event){
let inputValue = document.getElementById("myInput").value;
if (!inputValue) {
document.getElementById("errorMessage").textContent = "このフィールドは必須です。";
event.preventDefault(); // フォームの送信を中止
} else {
document.getElementById("errorMessage").textContent = "";
}
});
実装サンプル
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
解説
このコードは、”myForm”というIDを持つ要素の送信時に発火するリスナーを設定しています。ユーザーが”myInput”に入力した値を取得し、その値が空であるかどうかを確認します。もし入力が空の場合、”errorMessage”というIDを持つ要素に「このフィールドは必須です」というメッセージが表示され、同時にevent.preventDefault()を使用してフォームの送信が中止されます。入力が存在する場合、エラーメッセージは表示されません。
jQueryで実装する方法
テキストフィールドの必須チェックをjQueryで実装する方法は以下になります。
$("#myForm").on("submit", function(event){
let inputValue = $("#myInput").val();
if (!inputValue) {
$("#errorMessage").text("このフィールドは必須です。");
event.preventDefault(); // フォームの送信を中止
} else {
$("#errorMessage").text("");
}
});
実装サンプル
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
解説
このコードはjQueryを使用して、”myForm”というIDを持つ要素の送信時に動作するイベントリスナーを設定しています。ユーザーが”myInput”に入力した値を取得し、その値が空であるかどうかを確認します。入力が空の場合、”errorMessage”というIDを持つ要素に「このフィールドは必須です」というメッセージが表示され、フォームの送信をevent.preventDefault()で中止します。入力が存在する場合、エラーメッセージはクリアされます。
テキストエリアの必須チェック
テキストエリアの必須チェックを実装するためのサンプルとなるHTMLは以下をもとに解説します。
HTML
<form id="myForm">
<textarea id="myTextarea"></textarea>
<button type="submit">送信</button>
</form>
<div id="textareaErrorMessage" style="color: red;"></div>
JavaScriptで実装する方法
テキストエリアの必須チェックをJavaScriptで実装する方法は以下になります。
document.getElementById("myForm").addEventListener("submit", function(event){
let textareaValue = document.getElementById("myTextarea").value;
if (!textareaValue.trim()) { // trim()を使って空白のみの入力もチェック
document.getElementById("textareaErrorMessage").textContent = "テキストエリアは必須です。";
event.preventDefault();
} else {
document.getElementById("textareaErrorMessage").textContent = "";
}
});
実装サンプル
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
解説
このコードは、”myForm”というIDを持つ要素の送信時に動作するリスナーを設定しています。ユーザーが”myTextarea”に入力した値を取得し、trim()を使用して空白のみの入力も考慮に入れます。入力が空白のみまたは未入力の場合、”textareaErrorMessage”というIDを持つ要素に「テキストエリアは必須です」というメッセージが表示され、フォームの送信は中止されます。入力が存在する場合、エラーメッセージはクリアされます。
jQueryで実装する方法
テキストエリアの必須チェックをjQueryで実装する方法は以下になります。
$("#myForm").on("submit", function(event){
let textareaValue = $("#myTextarea").val();
if (!textareaValue.trim()) { // trim()を使って空白のみの入力もチェック
$("#textareaErrorMessage").text("テキストエリアは必須です。");
event.preventDefault();
} else {
$("#textareaErrorMessage").text("");
}
});
実装サンプル
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
解説
このコードはjQueryを使用して、”myForm”というIDを持つ要素の送信時に動作するイベントリスナーを設定しています。ユーザーが”myTextarea”に入力した値を取得し、trim()を使って空白のみの入力もチェックします。もし入力が空白のみまたは未入力の場合、”textareaErrorMessage”に「テキストエリアは必須です」というメッセージが表示され、フォームの送信が中止されます。入力が存在する場合、エラーメッセージはクリアされます。
セレクトボックスの必須チェック
セレクトボックスの必須チェックを実装するためのサンプルとなるHTMLは以下をもとに解説します。
HTML
<form id="myForm">
<select id="mySelect">
<option value="">選択してください</option>
<option value="option1">オプション1</option>
<option value="option2">オプション2</option>
</select>
<button type="submit">送信</button>
</form>
<div id="selectErrorMessage" style="color: red;"></div>
JavaScriptで実装する方法
セレクトボックスの必須チェックをJavaScriptで実装する方法は以下になります。
document.getElementById("myForm").addEventListener("submit", function(event){
let selectedValue = document.getElementById("mySelect").value;
if (!selectedValue) {
document.getElementById("selectErrorMessage").textContent = "選択は必須です。";
event.preventDefault();
} else {
document.getElementById("selectErrorMessage").textContent = "";
}
});
実装サンプル
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
解説
このコードは、”myForm”というIDを持つ要素の送信時に動作するリスナーを設定しています。ユーザーが”mySelect”から選択した値を取得します。もし何も選択されていない場合、”selectErrorMessage”というIDを持つ要素に「選択は必須です」というメッセージが表示され、フォームの送信は中止されます。何かが選択されている場合、エラーメッセージはクリアされます。
jQueryで実装する方法
セレクトボックスの必須チェックをjQueryで実装する方法は以下になります。
$("#myForm").on("submit", function(event){
let selectedValue = $("#mySelect").val();
if (!selectedValue) {
$("#selectErrorMessage").text("選択は必須です。");
event.preventDefault();
} else {
$("#selectErrorMessage").text("");
}
});
実装サンプル
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
解説
このコードはjQueryを使用して、”myForm”というIDを持つ要素の送信時に動作するイベントリスナーを設定しています。ユーザーが”mySelect”から選択した値を取得し、もし何も選択されていない場合、”selectErrorMessage”に「選択は必須です」というメッセージが表示され、フォームの送信が中止されます。何かが選択されている場合、エラーメッセージはクリアされます。
ラジオボタンの必須チェック
ラジオボタンの必須チェックを実装するためのサンプルとなるHTMLは以下をもとに解説します。
HTML
<form id="myForm">
<label><input type="radio" name="myRadio" value="option1">オプション1</label>
<label><input type="radio" name="myRadio" value="option2">オプション2</label>
<button type="submit">送信</button>
</form>
<div id="radioErrorMessage" style="color: red;"></div>
JavaScriptで実装する方法
ラジオボタンの必須チェックをJavaScriptで実装する方法は以下になります。
document.getElementById("myForm").addEventListener("submit", function(event){
let selectedValue = document.querySelector('input[name="myRadio"]:checked');
if (!selectedValue) {
document.getElementById("radioErrorMessage").textContent = "オプションを選択してください。";
event.preventDefault();
} else {
document.getElementById("radioErrorMessage").textContent = "";
}
});
実装サンプル
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
解説
このコードは、”myForm”というIDを持つ要素の送信時に発火するリスナーを設定しています。ユーザーが”name”属性が”myRadio”のラジオボタンから選択した項目を取得します。選択されていない場合、”radioErrorMessage”というIDの要素に「オプションを選択してください」というメッセージが表示され、フォームの送信が中止されます。選択されている場合、エラーメッセージはクリアされます。
jQueryで実装する方法
ラジオボタンの必須チェックをjQueryで実装する方法は以下になります。
$("#myForm").on("submit", function(event){
let isAnyRadioChecked = $('input[name="myRadio"]:checked').length > 0;
if (!isAnyRadioChecked) {
$("#radioErrorMessage").text("オプションを選択してください。");
event.preventDefault();
} else {
$("#radioErrorMessage").text("");
}
});
実装サンプル
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
解説
このコードはjQueryを使用して、”myForm”というIDを持つ要素の送信時に動作するイベントリスナーを設定しています。ユーザーが”name”属性が”myRadio”のラジオボタンから選択した項目が存在するかを確認します。選択されていない場合、”radioErrorMessage”に「オプションを選択してください」というメッセージが表示され、フォームの送信が中止されます。選択されている場合、エラーメッセージはクリアされます。
その他のバリデーションチェック
まとめ
以上、様々なフォーム要素における必須チェックの方法を紹介しました。正確なバリデーションはユーザーエクスペリエンスの向上だけでなく、データの品質を保つ上でも非常に重要です。しかし、これらのバリデーションはブラウザのJavaScriptが有効になっている場合のみ動作するため、ユーザーがブラウザでJavaScriptをオフにしていると機能しない点を留意してください。もちろん、今回紹介したものは基本的な方法に過ぎません。実際のプロジェクトに応じて、もっと高度なバリデーションやカスタマイズが必要となるかと思います。基本をしっかりと理解しておくことは、より複雑なバリデーションを実装する際の土台となります。最後に、フロントエンドでのバリデーションは重要ですが、セキュリティの観点からもサーバーサイドでのバリデーションも忘れずに実装することを強くおすすめします。
