:valid

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

:valid は CSS の擬似クラスで、内容物の検証に成功した <input> 要素やその他の <form> 要素を表します。これにより、有効な入力欄に、データの形式が適切であることをユーザーが確認しやすくなる外観を簡単に適用できるようになります。

css

/* 有効な <input> をすべて選択 */
input:valid {
  background-color: powderblue;
}

試してみましょう

この擬似クラスは、入力値が正しい入力欄をユーザーに強調表示するのに便利です。

構文

:user-valid

例

有効／無効なフォームフィールドを示す

この例では、このような構造を使用しています。この構造には、コンテンツを生成するための追加の <span> が含まれており、これらを使用して、データが有効であるか無効であるかの表示を提供します。

html

<div>
  <label for="fname">First name *: </label>
  <input id="fname" name="fname" type="text" required />
  <span></span>
</div>

これらの表示を提供するために、以下の CSS を使用します。

css

input + span {
  position: relative;
}

input + span::before {
  position: absolute;
  right: -20px;
  top: 5px;
}

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

input:invalid + span::before {
  content: "✖";
  color: red;
}

input:valid + span::before {
  content: "✓";
  color: green;
}

生成されたコンテンツを相対的に配置できるように <span> を position: relative に設定します。そして、フォームのデータが有効か無効かに応じて、生成されるコンテンツを絶対位置指定で配置します。無効なデータには、さらに軽く緊急性を表すために、無効になったときに太い赤い枠線をつけています。

メモ: これらのラベルを追加するために ::before を使ったのは、すでに ::after を "required" ラベルに使っていたからです。

以下で試してみることができます。

必須のテキスト入力は、空の状態では無効ですが、何かが記入されている状態では有効であることに注意してください。一方、 email の入力は、必須ではないため、空の場合は有効ですが、適切な email アドレスでないものが含まれている場合は無効となります。

アクセシビリティの考慮

緑色は入力が有効であることを示すためによく使われます。色盲の人によっては、それ以外の色によらない識別方法を伴わないと、入力状態が判別できないことがあります。通常、文字列やアイコンを使用して説明します。

仕様書

Specification
HTML Standard # selector-valid
Selectors Level 4 # validity-pseudos

ブラウザーの互換性

BCD tables only load in the browser