Webフォームで必須項目をバリデーションし、未入力の項目を強調表示するためのJavaScriptコードを作成する方法を解説します。今回は、お名前、メールアドレス、性別の項目を対象に、エラーメッセージを表示し、未入力項目を赤枠で強調する方法を紹介します。
JavaScriptによる必須項目のバリデーション
Webフォームで入力を受け付ける際、必須項目が未入力の場合にエラーメッセージを表示したり、未入力の項目を赤枠で強調することがよくあります。これを実現するために、JavaScriptを使ってフォームのバリデーションを行います。
基本的なHTMLフォームの作成
まず、フォームのHTMLを作成します。以下は、必要な項目（お名前、メールアドレス、性別）を含むフォームの例です。
<form method="get" action="complete.html" onsubmit="return fmConfirm()">
<table>
<tr><td>お名前：</td> <td><input type="text" name="name" value="" placeholder="例：山田太郎" onClick="init()"></td></tr>
<tr><td>メールアドレス：</td> <td><input type="email" name="email" value="" placeholder="例: example@example.com"></td></tr>
<tr><td>性別：</td> <td><input type="radio" name="gender" value="1" id="q1">
<label for="q1">男性</label>
<input type="radio" name="gender" value="2" id="q2">
<label for="q2">女性</label></td></tr>
<tr><td><input type="submit" onClick="init()" value="購入する"></td></tr>
</table>
</form>JavaScriptで必須項目をバリデーションする
JavaScriptで、フォームが送信される前に必須項目をチェックします。以下のコードでは、必須項目が未入力の場合、エラーメッセージを表示し、未入力の項目を赤枠で強調します。
function fmConfirm() {
var name = document.forms[0].name.value;
var email = document.forms[0].email.value;
var gender = document.forms[0].gender.value;
var valid = true;
if (name == "") {
document.getElementsByName("name")[0].style.border = "2px solid red";
valid = false;
}
if (email == "") {
document.getElementsByName("email")[0].style.border = "2px solid red";
valid = false;
}
if (gender == "") {
document.getElementsByName("gender")[0].style.border = "2px solid red";
valid = false;
}
if (!valid) {
alert("全ての必須項目を入力してください");
}
return valid;
}このコードでは、`name`、`email`、`gender`の項目をそれぞれチェックし、未入力の場合は赤枠で強調表示します。また、すべての必須項目が入力されていない場合、エラーメッセージが表示され、フォームは送信されません。
エラーをリセットする方法
正しい入力が行われた場合、赤枠をリセットするためには、フォームの送信時にスタイルを元に戻す処理を追加します。以下のように、入力が正しい場合はスタイルをリセットすることができます。
function resetBorders() {
document.getElementsByName("name")[0].style.border = "";
document.getElementsByName("email")[0].style.border = "";
document.getElementsByName("gender")[0].style.border = "";
}この関数をフォーム送信後に呼び出すことで、エラーが解消された場合に強調表示がリセットされます。
まとめ
JavaScriptを使用して必須項目のバリデーションを実装することで、ユーザーがフォームを送信する前に必要な項目を入力しているか確認することができます。エラーメッセージや赤枠での強調表示を行うことで、視覚的にユーザーに注意を促すことができます。この方法を活用して、ユーザーの入力ミスを防ぎ、フォームの入力精度を向上させましょう。
コメント