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.
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
となります。
例
次のような例があったとします。
<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>
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