JavaScriptでメールアドレスの入力チェックをする方法

概要

入力フォームで、メールアドレスの入力チェックを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;
}