Rhyztech blog

ひたすら楽するemailのバリデーション

tech

email のバリデーション処理ってクソ難しく、ググって出てくる正規表現はだいたい問題を抱えているので、 今回はブラウザ側にバリデーションを投げてしまおうというお話です。

TLTR

type="email"を使ってバリデーションしよう。以上。

<input type="email">

form で”novalidate”を指定した場合

ブラウザ標準のエラーメッセージが気に入らないなどの理由で、form で”novalidate”を指定した場合は JavaScript 側で制約検証 API を使う必要があります。

例えばこのようは HTML があるとして、

<form id="form" novalidate>
  <p>
    <label for="mail">
      <span>Email</span>
      <input type="email" id="mail" name="mail">
      <span class="error" aria-live="polite"></span>
    </label>
  </p>
  <button>Submit</button>
</form>

JavaScript で制約検証 API で email の検証をします。

var form  = document.getElementById('form');
var email = document.getElementById('mail');
var error = document.querySelector('.error');

email.addEventListener("input", function (event) {
  if (email.validity.valid) {
    error.innerHTML = "";
    error.className = "error";
  }
}, false);
form.addEventListener("submit", function (event) {
  if (!email.validity.valid) {
    error.innerHTML = "Emailのフォーマットが異なっています。";
    error.className = "error active";
    event.preventDefault();
  }
}, false);

サーバー側でももちろんチェックスする必要がありますが、 ブラウザ標準に任せればベンダーがきっと直してくれる(はず)なので、脳死してブラウザに任せよう。

Copyright 2021, rhyztech. All Rights Reserved.