概要
入力フォームで、メールアドレスの入力チェックをJavaScriptでする方法です。
See the Pen form-email by take it easy (@take-it-easy) on CodePen.
フォーカスが外れた時に入力チェックを行い、フォーカスが当たった時に出力されているエラーメッセージが消える動きです。
HTML
<div>
<label for="email">メールアドレス:</label>
<input type="email" id="email" name="email" placeholder="sample@take-it-easy.site" size=40 />
<div id="error-msg-email" class="error-msg" style="display: none;"></div>
</div>
JavaScript
フォーカスが外れた時のイベントハンドラ
/**
* メールアドレス
*/
var input_email = document.getElementById('email');
/**
* フォーカスが外れた場合のイベントハンドラ
*/
input_email.addEventListener('blur', function(){
// 入力されたメールアドレスを取得してトリムして値を設定し直す
input_email.value = input_email.value.trim();
// 入力チェック
validate_email();
});
フォーカスが外れた時に、入力されたメールアドレスのトリムを行い、入力チェックをするメソッドの呼び出しを行います。
メールアドレスの入力チェック
/**
* メールアドレスの入力チェック
*/
function validate_email() {
var val = input_email.value;
// 必須チェック
if (val == "") {
// エラーメッセージの作成
var err_msg = document.createElement('p');
err_msg.textContent = 'メールアドレスは入力必須項目です。';
// エラーメッセージの表示領域
var err_msg_div = document.getElementById('error-msg-email');
// エラーメッセージの表示領域を表示する
err_msg_div.style.display = "block";
// エラーメッセージの表示領域にエラーメッセージを追加
err_msg_div.appendChild(err_msg);
// 入力欄にinput-errorクラスを追加
input_email.setAttribute('class', 'input-error');
return;
}
// メールアドレス形式チェック
var regex = new RegExp(/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/);
if (!regex.test(val)) {
// エラーメッセージの作成
var err_msg = document.createElement('p');
err_msg.textContent = 'メールアドレスを入力してください。';
// エラーメッセージの表示領域
var err_msg_div = document.getElementById('error-msg-email');
// エラーメッセージの表示領域を表示する
err_msg_div.style.display = "block";
// エラーメッセージの表示領域にエラーメッセージを追加
err_msg_div.appendChild(err_msg);
// 入力欄にinput-errorクラスを追加
input_email.setAttribute('class', 'input-error');
return;
}
}
今回は、必須チェックとメールアドレス形式のチェックを行っています。
メールアドレス形式のチェックは正規表現で行います。
フォーカスが当たった場合のイベントハンドラ
/**
* フォーカスが当たった場合のイベントハンドラ
*/
input_email.addEventListener('focus', function(){
// input-errorクラスを削除
input_email.classList.remove('input-error');
// エラーメッセージの表示領域を非表示にする
document.getElementById('error-msg-email').style.display = "none";
// エラーメッセージを削除
document.getElementById('error-msg-email').children[0].remove();
});
フォーカスが外れた時は、エラーメッセージを削除・非表示にして、入力欄へ追加していたinput-errorクラスの削除を行っています。
CSS
動きがわかりやすいように設定したスタイルです。
/* フォーカスが当たった時の青枠を表示しない */
*:focus {
outline: none;
}
/* 入力フォームのエリア */
div.input-area {
margin: 15px 0 10px 10px;
}
/* 項目名用のラベル */
div.input-area label {
display: inline-block;
width: 8rem;
text-align: right;
}
/* エラーメッセージのスタイル */
div.error-msg p {
color: #d00;
margin: 0 0 0 8rem;
}
/* 入力欄 */
input[type="email"] {
line-height: 2em;
}
/* 入力エラーがあった時のスタイル */
.input-error {
border: 1px solid #d00;
border-radius: 3px;
background-color: #FCC;
}