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 ⁨2015年7月⁩.

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 になります。