:invalid エラーになった入力欄のスタイルを指定

CSSの疑似クラスセレクター:invalidを使うと、ブラウザによるバリデーションでエラーが検出された<input>や<form>のスタイルを変えることができます。

:invalidの使用例

例1：メアド形式が間違っていると枠線を赤に

例えば、エラーになった<input>の枠線を赤にしてみます。ここではメールアドレス用の入力欄（<input type="email">）を使うことにします。メールアドレスの形式でない文字列を入力すると、ブラウザがエラーを検出してくれます。

関連するページを読む

<input type="email">の使い方

<div>
  <label>正しいメアドを入力</label>
  <br>
  <input
    type="email"
    value="example@gmail.com"
    size="30"
    >
</div>
<br>
<div>
  <label>誤ったメアドを入力</label>
  <br>
  <input 
    type="email"
    value="メールアドレスじゃない文字列"
    size="30"
    >
</div>

input:invalid {
  border: solid 1px red;
}

👆メールアドレスの形式ではない文字列を入れるとエラー（:invalid）になります。CSSでinput:invalid { ~ }とすれば、エラーが検出されたinputを装飾できるわけですね。

ユーザーの入力ミスがあったときに、リアルタイムで視覚的に間違っていることを伝えられるのは魅力的です。

例2：入力必須フィールドが空ならメッセージを表示

<input>タグにrequired属性を追加するとフィールドが入力必須になり、空だとブラウザがエラーを検出してくれます。

ここでは、CSSの隣接セレクター^[1]を使って、空のとき（= :invalid）だけアラート・メッセージを表示してみます。

<div>
  <label>入力必須欄が埋まってる</label>
  <br>
  <input
    type="text"
    value="テキスト"
    required
    >
  <div class="error-message">※ 入力必須です</div>
</div>
<br>
<div>
  <label>入力必須欄が空</label>
  <br>
  <input 
    type="text"
    required
    >
  <div class="error-message">※ 入力必須です</div>
</div>

/* inputのすぐ隣に配置するメッセージ要素 */
.error-message {
  font-size: 12px;
  color: #ff7676;
  display: none; /* 非表示に */
}
/* :invalid時だけ隣の要素を表示 */
input:invalid + .error-message  {
  display: block;
}

👆input:invalidとなっている場合のみ、すぐとなり（すぐ下）のエラーメッセージ「※入力必須です」が表示されます。

:invalidを他の:◯◯と合わせて使う

:invalidは、:hover :required :focus :before :afterなどの擬似クラス・疑似要素と合わせて使うことができます。

<div>👇カーソルをあててください</div>
<input 
  type="text"
  required
  >

/* invalid かつ focus時のスタイル */
input:invalid:focus {
  border: solid 3px red;
  outline: 0;
}

👆この例では、input:invalid:focusと繋げているため、エラーが検出（:invalid）かつフォーカスがあたったときのみスタイルが変わります。

否定セレクタを使ってinput:invalid:not(:focus)とすれば、逆にフォーカスが当たっていないときのスタイルを指定できます。

注意点

• :invalidが使えるのは、ブラウザによるエラーチェックだけです。自作やライブラリのJavaScriptのバリデーションがエラーを検出しても:invalidは使えないので注意しましょう。
• コロン:は1つです。:hoverや:activeと同じ擬似クラスです。