ValidityState.typeMismatch

Baseline Widely available

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

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

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

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

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

入力型 期待される値
email x@yx@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 は数あるエラーのひとつで、 emailurl の入力型にのみ関係します。他の入力型では、提供された値が型に基づく期待値と一致しない場合、異なるエラーが発生します。例えば、 number の入力値が浮動小数点数でない場合、 badInputtrue になります。メールが required であるにもかかわらず空の場合は、 valueMissingtrue になります。

仕様書

Specification
HTML
# dom-validitystate-typemismatch

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
typeMismatch

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報