From af2b9979c437f58a9bb7742fd23b5259c235ebe9 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 7 Apr 2021 01:10:42 +0900 Subject: Web/API/ValidityState/patternMismatch を新規翻訳 (#328) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 2020/12/18 時点の英語版に基づき翻訳 --- .../api/validitystate/patternmismatch/index.html | 81 ++++++++++++++++++++++ 1 file changed, 81 insertions(+) create mode 100644 files/ja/web/api/validitystate/patternmismatch/index.html (limited to 'files/ja') diff --git a/files/ja/web/api/validitystate/patternmismatch/index.html b/files/ja/web/api/validitystate/patternmismatch/index.html new file mode 100644 index 0000000000..b8938276e8 --- /dev/null +++ b/files/ja/web/api/validitystate/patternmismatch/index.html @@ -0,0 +1,81 @@ +--- +title: ValidityState.patternMismatch +slug: Web/API/ValidityState/patternMismatch +tags: + - API + - Constraint Validation API + - DOM + - Property + - Reference +translation_of: Web/API/ValidityState +--- +

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

+ +

そのフィールドが pattern 属性に対応している場合 -- つまり、 {{HTMLElement("input")}} の type が {{HTMLElement("input/text", "text")}}, {{HTMLElement("input/tel", "tel")}}, {{HTMLElement("input/email", "email")}}, {{HTMLElement("input/url", "url")}}, {{HTMLElement("input/password", "password")}}, {{HTMLElement("input/search", "search")}} のいずれかであった場合 -- かつ、 pattern の値が有効な正規表現に設定されていた場合、値が pattern の値で設定された制約に適合していない場合、 patternMismatch プロパティが true になります。

+ +

例

+ +

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

+ +
<p>
+ <label>電話番号を (123)456-7890 の形で入力してください
+  (<input name="tel1" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit area code" size="2"/>)-
+   <input name="tel2" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit prefix" size="2"/> -
+   <input name="tel3" type="tel" pattern="[0-9]{4}" placeholder="####" aria-label="4-digit number" size="3"/>
+ </label>
+</p>
+ +

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

+ +

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

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

{{EmbedLiveSample("Examples", 300, 40)}}

+ +

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

+ +
+

注: pattern 属性がない場合、 {{HTMLElement("input/email", "email")}} 入力型は、少なくとも x@y に一致する必要があり、 {{HTMLElement("input/url", "url")}} 型は、少なくとも x: に一致する必要があります。無効な場合、 pattern 属性がない場合 (またはその入力型で pattern 属性が無効な場合) は {{domxref('validityState.typeMismatch')}} が true になります。

+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('HTML WHATWG', 'constraints.html#dom-validitystate-patternmismatch', 'ValidityState.patternMismatch') }}{{Spec2('HTML WHATWG')}}
{{ SpecName('HTML5.1', 'sec-forms.html#dom-validitystate-patternmismatch', 'ValidityState.patternMismatch') }}{{Spec2('HTML5.1')}}
{{ SpecName('HTML5 W3C', 'forms.html#dom-validitystate-patternmismatch', 'ValidityState.patternMismatch') }}{{Spec2('HTML5 W3C')}}
+ +

ブラウザーの互換性

+ +

{{Compat("api.ValidityState.patternMismatch")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf