複数のメールアドレス入力欄でリアルタイムにバリデーションを行う方法
ウェブフォームに複数のメールアドレス入力欄がある場合、
それぞれに対してバリデーションを行う必要があります。
しかし、個別にバリデーションを設定していくと、コードが冗長になり、
管理が煩雑になることがあります。
今回は、JavaScriptを使って複数のメールアドレスフィールドを
簡潔にバリデーションする方法を紹介します。
複数のメールアドレスフィールドのバリデーションが必要なケース
例えば、ユーザーが異なるメールアドレスを複数入力するフォームを作成した場合、
それぞれの入力欄に正しい形式のメールアドレスが入力されているか
どうかをチェックする必要があります。
メールアドレスが不正な場合には、ユーザーに即座にフィードバックを返すことで、
入力ミスを防ぐことができます。
初歩的な複数フィールドのバリデーションコード
まず、複数のメールアドレス入力欄に対してそれぞれバリデーションを設定したコードを紹介します。
このコードは、入力欄ごとに個別の処理を書いているため、冗長になります。
HTML
<form id="emailForm">
<label for="email">メールアドレス1:</label>
<input type="text" id="email" name="email" placeholder="example1@example.com">
<span id="error" style="color: red;"></span>
<br>
<label for="email02">メールアドレス2:</label>
<input type="text" id="email02" name="email02" placeholder="example2@example.com">
<span id="error02" style="color: red;"></span>
<br>
<input type="submit" value="送信">
</form>
JavaScript
const emailInput = document.getElementById('email');
const errorElement = document.getElementById('error');
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; // メールアドレスの正規表現パターン
// 入力された瞬間にバリデーションを行う
emailInput.addEventListener('input', function() {
if (!emailPattern.test(emailInput.value)) {
errorElement.textContent = '正しいメールアドレスを入力してください。';
} else {
errorElement.textContent = ''; // エラーメッセージをクリア
}
});
const emailInput02 = document.getElementById('email02');
const errorElement02 = document.getElementById('error02');
// 同様の処理を繰り返す
emailInput02.addEventListener('input', function() {
if (!emailPattern.test(emailInput02.value)) {
errorElement02.textContent = '正しいメールアドレスを入力してください。';
} else {
errorElement02.textContent = ''; // エラーメッセージをクリア
}
});
このコードでは、同じような処理が2回繰り返されています。
複数のメールアドレスフィールドを扱う場合、
フィールドが増えるほどコードが冗長になり、管理が難しくなります。
関数を使ったコードの最適化
上記のように、同じ処理が何度も出てくるコードは、可読性が低く、
変更が生じたときに全ての箇所に修正を加える必要が出てきます。
そこで、関数化 することでコードの重複を避け、保守性を高めることができます。
最適化されたJavaScript
// バリデーション処理を関数化
function validateEmail(inputId, errorId) {
const emailInput = document.getElementById(inputId);
const errorElement = document.getElementById(errorId);
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; // メールアドレスの正規表現パターン
emailInput.addEventListener('input', function() {
if (!emailPattern.test(emailInput.value)) {
errorElement.textContent = '正しいメールアドレスを入力してください。';
} else {
errorElement.textContent = ''; // エラーメッセージをクリア
}
});
}
// 複数のメール入力欄に対して関数を呼び出す
validateEmail('email', 'error');
validateEmail('email02', 'error02');
説明
validateEmail
関数
この関数を作成し、inputId
と errorId
を引数として渡すことで、
各入力欄に対してバリデーションを共通化しています。
これにより、同じ処理を何度も書かずに済むようになり、簡潔でメンテナブルなコードになります。
メリット
関数を使うことで、もしメールアドレスの正規表現やエラーメッセージを変更する必要が生じた場合、
関数内の処理を1箇所だけ変更すればよく、複数箇所の修正を避けられます。
まとめ
フォームのバリデーションはユーザーエクスペリエンスを向上させ、
正しいデータを入力してもらうための重要なステップです。
特に複数の入力欄がある場合、同じ処理を繰り返さずに、
関数を活用する ことで効率的なコードを書けるようになります。
関数を使用することで、コードの重複を防ぎ、
将来的に変更が必要な際にも柔軟に対応できるコード設計が可能です。
複数のメールアドレス入力欄を使うフォームでも、この手法をぜひ取り入れてみてください。
CSSとJavaScriptで実現するパララックス効果【モバイル対応】
10月 27, 2024JavaScriptとCSSで作る!マウスオーバーでひっくり返る3Dボタンの実装方法
10月 10, 2024JavaScriptで特定の時間帯に応じて文字を変更する方法
10月 9, 2024