ValidityState.typeMismatch

Baseline 2023

Newly available

Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

typeMismatch は ValidityState オブジェクトの読み取り専用プロパティで、 <input> の値がユーザーによって変更された後、その要素の type 属性で設定された制約に適合していないことを示します。

type 属性が特定の文字列を期待している場合、例えば email や url 型で、型で設定された制約に適合しない値である場合は、 typeMismatch プロパティが true になります。

email 入力型は multiple 属性が存在するかどうかに応じて、1 つ以上の有効なメールアドレスを期待します。有効なメールアドレスには、メールの先頭部分と、トップレベルドメインの有無にかかわらず、ドメインが含まれます。email 入力の値が、空の文字列、単一の有効なメールアドレス、または、multiple 属性が存在する場合はカンマで区切られた 1 つ以上のメールアドレスでない場合は、typeMismatch となります。

url 入力型は、multiple 属性が存在するかどうかに応じて、 1 つ以上の有効な URL を想定しています。有効な URL には、プロトコル、任意で IP アドレス、または任意でサブドメイン、ドメイン、トップレベルドメインの組み合わせが含まれます。 URL 入力の値が空の文字列、単一の有効な URL、または multiple 属性が存在する場合はカンマで区切られた 1 つまたは複数の URL でない場合は、 typeMismatch となります。

入力型 値 期待される値
email x@y や x@y.z [TLD] の有無にかかわらず、メールアドレス
url x: や x://y.z プロトコルやプロトコル付きの完全 URL

例

次のような例があったとします。

html
<p>
  <label>
    Enter an email address:
    <input type="email" value="example.com" />
  </label>
</p>
<p>
  <label>
    Enter a URL:
    <input type="url" value="example.com" />
  </label>
</p>
css
input:invalid {
  border: red solid 3px;
}

上記のものは、メールアドレスが単なるドメインであり、 URL にプロトコルがないため、typeMismatchが発生します。

typeMismatch は、 type 属性で期待される value の値と、実際に存在するデータとの間に不一致がある場合に発生します。 typeMismatch は数あるエラーのひとつで、 email と url の入力型にのみ関係します。他の入力型では、提供された値が型に基づく期待値と一致しない場合、異なるエラーが発生します。例えば、 number の入力値が浮動小数点数でない場合、 badInput が true になります。メールが required であるにもかかわらず空の場合は、 valueMissing が true になります。

仕様書

Specification
HTML Standard
# dom-validitystate-typemismatch

ブラウザーの互換性

BCD tables only load in the browser

関連情報