ValidityState.patternMismatch

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.

patternMismatchValidityState オブジェクトの読み取り専用プロパティで、 <input> 要素の値がユーザーによって編集された後で、その要素の pattern 属性で設定された制約に適合するかどうかを示します。

patternMismatch プロパティは、以下の条件がすべて真である場合にのみ、true となります。

  • そのフィールドが pattern 属性に対応している場合 — つまり、 <input>typetext, tel, email, url, password, search のいずれかであった場合
  • pattern 属性の値が有効な正規表現に設定されていた場合
  • <input> 値が pattern の値で設定された制約に適合していない場合

以下のものがあったとします。

html
<p>
  <label
    >電話番号を (123)456-7890 の形で入力してください (<input
      name="tel1"
      type="tel"
      pattern="[0-9]{3}"
      placeholder="###"
      aria-label="3 桁の市外局番"
      size="2" />)-
    <input
      name="tel2"
      type="tel"
      pattern="[0-9]{3}"
      placeholder="###"
      aria-label="3 桁の市内局番"
      size="2" />
    -
    <input
      name="tel3"
      type="tel"
      pattern="[0-9]{4}"
      placeholder="####"
      aria-label="4 桁の加入者番号"
      size="3" />
  </label>
</p>

ここでは、北米の電話番号のための 3 つの部分があり、電話番号の 3 つの構成要素すべてを包含する暗黙のラベルが、それぞれ 3 桁、3 桁、4 桁を期待しています。それぞれが pattern 属性によってそのように定義されています。

値が長すぎたり短すぎたり、数字ではない文字が含まれていたりすると、 patternMismatch が true になります。 true の場合、要素は CSS の :invalid 擬似クラスに一致します。

css
input:invalid {
  border: red solid 3px;
}

この場合、値の長さを決定するのはパターンであるため、値が長すぎたり短すぎたりした場合に発生するのは patternMismatch であり、 validityState.tooLongvalidityState.tooShort ではないことに注意してください。代わりに minlengthmaxlength 属性を使用していたら、 validityState.tooLong または validityState.tooShort が true になるかもしれません。

メモ: pattern 属性がない場合、 email 入力型は、少なくとも x@y に一致する必要があり、 url 型は、少なくとも x: に一致する必要があります。無効な場合、pattern 属性がない場合(またはその入力型で pattern 属性が無効な場合)は validityState.typeMismatch が true になります。

仕様書

Specification
HTML
# dom-validitystate-patternmismatch

ブラウザーの互換性

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
patternMismatch

Legend

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

Full support
Full support

関連情報