From 995620e74d11495cc7842b8892a77349ef8f93a4 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 11 Dec 2021 21:09:22 +0900 Subject: Web/API/ValidityState 以下を変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/validitystate/badinput/index.html | 68 ------------------ files/ja/web/api/validitystate/badinput/index.md | 68 ++++++++++++++++++ files/ja/web/api/validitystate/index.html | 83 ---------------------- files/ja/web/api/validitystate/index.md | 83 ++++++++++++++++++++++ .../api/validitystate/patternmismatch/index.html | 81 --------------------- .../web/api/validitystate/patternmismatch/index.md | 81 +++++++++++++++++++++ files/ja/web/api/validitystate/toolong/index.html | 55 -------------- files/ja/web/api/validitystate/toolong/index.md | 55 ++++++++++++++ 8 files changed, 287 insertions(+), 287 deletions(-) delete mode 100644 files/ja/web/api/validitystate/badinput/index.html create mode 100644 files/ja/web/api/validitystate/badinput/index.md delete mode 100644 files/ja/web/api/validitystate/index.html create mode 100644 files/ja/web/api/validitystate/index.md delete mode 100644 files/ja/web/api/validitystate/patternmismatch/index.html create mode 100644 files/ja/web/api/validitystate/patternmismatch/index.md delete mode 100644 files/ja/web/api/validitystate/toolong/index.html create mode 100644 files/ja/web/api/validitystate/toolong/index.md (limited to 'files/ja/web/api') diff --git a/files/ja/web/api/validitystate/badinput/index.html b/files/ja/web/api/validitystate/badinput/index.html deleted file mode 100644 index cefc7f140f..0000000000 --- a/files/ja/web/api/validitystate/badinput/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: ValidityState.badInput -slug: Web/API/ValidityState/badInput -tags: - - API - - Constraints API - - HTML DOM - - Property - - Read-only - - ValidityState -translation_of: Web/API/ValidityState/badInput ---- -

{{APIRef("HTML DOM")}}

- -

読み取り専用のプロパティ ValidityState.badInput は、ブラウザが変換できない入力をユーザーが行ったかどうかを示します。例えば、数値の入力欄に文字列がある場合です。
- 注: Internet Explorer はこれをサポートしていませんが、たとえば数値入力欄では、数値ではない値は無視されるので問題ありません。

- -

例

- -
<input type="number" id="age">
- -
var input = document.getElementById("age");
-if (input.validity.badInput) {
-  console.log("Bad input detected…");
-} else {
-  console.log("Content of input ok.");
-}
-
- -

仕様

- - - - - - - - - - - - - - - - - - - - - - - - -
仕様書策定状況コメント
{{ SpecName('HTML WHATWG', 'constraints.html#dom-validitystate-badinput', 'ValidityState.badInput') }}{{Spec2('HTML WHATWG')}}現行の標準
{{ SpecName('HTML5.1', '#dom-validitystate-badinput', 'ValidityState.badInput') }}{{Spec2('HTML5.1')}}前回のスナップショット {{SpecName('HTML5 W3C')}} から変更なし
{{ SpecName('HTML5 W3C', 'forms.html#dom-validitystate-badinput', 'ValidityState.badInput') }}{{Spec2('HTML5 W3C')}}このインターフェイスを含む {{SpecName('HTML WHATWG')}} の最初のスナップショット
- -

ブラウザー実装状況

- - - -

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

- -

関連情報

- - diff --git a/files/ja/web/api/validitystate/badinput/index.md b/files/ja/web/api/validitystate/badinput/index.md new file mode 100644 index 0000000000..cefc7f140f --- /dev/null +++ b/files/ja/web/api/validitystate/badinput/index.md @@ -0,0 +1,68 @@ +--- +title: ValidityState.badInput +slug: Web/API/ValidityState/badInput +tags: + - API + - Constraints API + - HTML DOM + - Property + - Read-only + - ValidityState +translation_of: Web/API/ValidityState/badInput +--- +

{{APIRef("HTML DOM")}}

+ +

読み取り専用のプロパティ ValidityState.badInput は、ブラウザが変換できない入力をユーザーが行ったかどうかを示します。例えば、数値の入力欄に文字列がある場合です。
+ 注: Internet Explorer はこれをサポートしていませんが、たとえば数値入力欄では、数値ではない値は無視されるので問題ありません。

+ +

例

+ +
<input type="number" id="age">
+ +
var input = document.getElementById("age");
+if (input.validity.badInput) {
+  console.log("Bad input detected…");
+} else {
+  console.log("Content of input ok.");
+}
+
+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{ SpecName('HTML WHATWG', 'constraints.html#dom-validitystate-badinput', 'ValidityState.badInput') }}{{Spec2('HTML WHATWG')}}現行の標準
{{ SpecName('HTML5.1', '#dom-validitystate-badinput', 'ValidityState.badInput') }}{{Spec2('HTML5.1')}}前回のスナップショット {{SpecName('HTML5 W3C')}} から変更なし
{{ SpecName('HTML5 W3C', 'forms.html#dom-validitystate-badinput', 'ValidityState.badInput') }}{{Spec2('HTML5 W3C')}}このインターフェイスを含む {{SpecName('HTML WHATWG')}} の最初のスナップショット
+ +

ブラウザー実装状況

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/api/validitystate/index.html b/files/ja/web/api/validitystate/index.html deleted file mode 100644 index 7a44bf90a9..0000000000 --- a/files/ja/web/api/validitystate/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: ValidityState -slug: Web/API/ValidityState -tags: - - API - - Constraint Validation API - - Forms - - HTML DOM - - Interface -translation_of: Web/API/ValidityState ---- -
{{APIRef("HTML DOM")}}
- -

ValidityState インターフェイスは、制約の検証に関して、要素が取りうる妥当性の状態を表します。要素の値が不正な場合に、なぜ検証に失敗するのかを知る手がかりにもなります。

- -

プロパティ

- -

下記のプロパティはどれも Boolean を返します。true は指定された検証が失敗したことを表します。ただし valid プロパティだけは例外で、 true が要素の値がすべての制約に適合していることを表します。

- -
-
{{domxref("ValidityState.badInput", "badInput")}} {{ReadOnlyInline}}
-
{{jsxref("Boolean")}} で、 true はブラウザーが処理できない入力値をユーザーが入力したことを示します。
-
customError {{ReadOnlyInline}}
-
{{jsxref("Boolean")}} で、その要素のカスタム検証メッセージが {{domxref('HTMLObjectElement.setCustomValidity', 'setCustomValidity()')}} メソッドによって空でない文字列に設定されているかどうかを示します。
-
{{domxref("ValidityState.patternMismatch", "patternMismatch")}} {{ReadOnlyInline}}
-
{{jsxref("Boolean")}} で、 true は値が {{htmlattrxref("pattern", "input")}} の指定と一致しないことを示し、 false は一致することを示します。 true の場合、その要素は CSS の {{cssxref(":invalid")}} 擬似クラスに一致します。
-
{{domxref("ValidityState.rangeOverflow", "rangeOverflow")}} {{ReadOnlyInline}}
-
{{jsxref("Boolean")}} で、 true は値が {{htmlattrxref("max", "input")}} 属性で指定された最大値を超えていることを示し、 false はその最大値以下である場合を示します。 true の場合、その要素は CSS の {{cssxref(":invalid")}} および {{cssxref(":out-of-range")}} の各擬似クラスに一致します。
-
{{domxref("ValidityState.rangeUnderflow", "rangeUnderflow")}} {{ReadOnlyInline}}
-
{{jsxref("Boolean")}} で、 true は値が {{htmlattrxref("min", "input")}} 属性で指定された最小値未満であることを示し、 false はその最小値以上であることを示します。 true の場合、その要素は CSS の {{cssxref(":invalid")}} および {{cssxref(":out-of-range")}} の各擬似クラスに一致します。
-
{{domxref("ValidityState.stepMismatch", "stepMismatch")}} {{ReadOnlyInline}}
-
{{jsxref("Boolean")}} で、 true は値が {{htmlattrxref("step", "input")}} 属性で決められた規則に合わないこと (つまり、step の値で割り切れないこと) を示し、 false は刻みの規則に合っていることを示します。 true の場合、その要素は CSS の {{cssxref(":invalid")}} および {{cssxref(":out-of-range")}} の各擬似クラスに一致します。
-
{{domxref("ValidityState.tooLong", "tooLong")}} {{ReadOnlyInline}}
-
{{jsxref("Boolean")}} で、 true は値が {{domxref("HTMLInputElement")}} または {{domxref("HTMLTextAreaElement")}} オブジェクトの maxlength で指定された長さを超えていることを示し、 false は長さがその最長値以下であることを示します。 注: Gecko ではこのプロパティが true になることはありません。要素の値の長さが maxlength を超えないようになっているからです。 true の場合、その要素は CSS の {{cssxref(":invalid")}} および {{cssxref(":out-of-range")}} の各擬似クラスに一致します。
-
{{domxref("ValidityState.tooShort", "tooShort")}} {{ReadOnlyInline}}
-
{{jsxref("Boolean")}} で、 true は値が {{domxref("HTMLInputElement")}} または {{domxref("HTMLTextAreaElement")}} オブジェクトの minlength で指定された長さに満たないことを示し、 false は長さがその最短値以上であることを示します。 true の場合、その要素は CSS の {{cssxref(":invalid")}} および {{cssxref(":out-of-range")}} の各擬似クラスに一致します。
-
{{domxref("ValidityState.typeMismatch", "typeMismatch")}} {{ReadOnlyInline}}
-
{{jsxref("Boolean")}} で、 true は値が ({{htmlattrxref("type", "input")}} が email または url の場合に) 要求された構文に合っていないことを示し、false は構文が正しいことを示します。 true の場合、その要素は CSS の {{cssxref(":invalid")}} 擬似クラスに一致します。
-
valid {{ReadOnlyInline}}
-
{{jsxref("Boolean")}} で、 true はその要素がすべての制約検証に適合し、合格したとみられることを示し、 false はいずれかの制約に適合しなかったことを示します。 true の場合、 CSS の {{cssxref(":valid")}} 擬似クラスに一致します。それ以外の場合は CSS の {{cssxref(":invalid")}} 擬似クラスに一致します。
-
{{domxref("ValidityState.valueMissing", "valueMissing")}} {{ReadOnlyInline}}
-
{{jsxref("Boolean")}} で、 true はその要素に {{htmlattrxref("required", "input")}} 属性があるものの、値がないことを示し、 false はそうではないことを示します。 true の場合、その要素は CSS の {{cssxref(":invalid")}} 擬似クラスに一致します。
-
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{ SpecName('HTML WHATWG', 'form-control-infrastructure.html#validitystate', 'ValidityState') }}{{Spec2('HTML WHATWG')}}現行の標準
{{ SpecName('HTML5.1', 'sec-forms.html#validitystate-validitystate', 'ValidityState') }}{{Spec2('HTML5.1')}}前回のスナップショット {{SpecName('HTML5 W3C')}} から変更なし
{{ SpecName('HTML5 W3C', 'forms.html#validitystate', 'ValidityState') }}{{Spec2('HTML5 W3C')}}このインターフェイスを含む {{SpecName('HTML WHATWG')}} の最初のスナップショット
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/api/validitystate/index.md b/files/ja/web/api/validitystate/index.md new file mode 100644 index 0000000000..7a44bf90a9 --- /dev/null +++ b/files/ja/web/api/validitystate/index.md @@ -0,0 +1,83 @@ +--- +title: ValidityState +slug: Web/API/ValidityState +tags: + - API + - Constraint Validation API + - Forms + - HTML DOM + - Interface +translation_of: Web/API/ValidityState +--- +
{{APIRef("HTML DOM")}}
+ +

ValidityState インターフェイスは、制約の検証に関して、要素が取りうる妥当性の状態を表します。要素の値が不正な場合に、なぜ検証に失敗するのかを知る手がかりにもなります。

+ +

プロパティ

+ +

下記のプロパティはどれも Boolean を返します。true は指定された検証が失敗したことを表します。ただし valid プロパティだけは例外で、 true が要素の値がすべての制約に適合していることを表します。

+ +
+
{{domxref("ValidityState.badInput", "badInput")}} {{ReadOnlyInline}}
+
{{jsxref("Boolean")}} で、 true はブラウザーが処理できない入力値をユーザーが入力したことを示します。
+
customError {{ReadOnlyInline}}
+
{{jsxref("Boolean")}} で、その要素のカスタム検証メッセージが {{domxref('HTMLObjectElement.setCustomValidity', 'setCustomValidity()')}} メソッドによって空でない文字列に設定されているかどうかを示します。
+
{{domxref("ValidityState.patternMismatch", "patternMismatch")}} {{ReadOnlyInline}}
+
{{jsxref("Boolean")}} で、 true は値が {{htmlattrxref("pattern", "input")}} の指定と一致しないことを示し、 false は一致することを示します。 true の場合、その要素は CSS の {{cssxref(":invalid")}} 擬似クラスに一致します。
+
{{domxref("ValidityState.rangeOverflow", "rangeOverflow")}} {{ReadOnlyInline}}
+
{{jsxref("Boolean")}} で、 true は値が {{htmlattrxref("max", "input")}} 属性で指定された最大値を超えていることを示し、 false はその最大値以下である場合を示します。 true の場合、その要素は CSS の {{cssxref(":invalid")}} および {{cssxref(":out-of-range")}} の各擬似クラスに一致します。
+
{{domxref("ValidityState.rangeUnderflow", "rangeUnderflow")}} {{ReadOnlyInline}}
+
{{jsxref("Boolean")}} で、 true は値が {{htmlattrxref("min", "input")}} 属性で指定された最小値未満であることを示し、 false はその最小値以上であることを示します。 true の場合、その要素は CSS の {{cssxref(":invalid")}} および {{cssxref(":out-of-range")}} の各擬似クラスに一致します。
+
{{domxref("ValidityState.stepMismatch", "stepMismatch")}} {{ReadOnlyInline}}
+
{{jsxref("Boolean")}} で、 true は値が {{htmlattrxref("step", "input")}} 属性で決められた規則に合わないこと (つまり、step の値で割り切れないこと) を示し、 false は刻みの規則に合っていることを示します。 true の場合、その要素は CSS の {{cssxref(":invalid")}} および {{cssxref(":out-of-range")}} の各擬似クラスに一致します。
+
{{domxref("ValidityState.tooLong", "tooLong")}} {{ReadOnlyInline}}
+
{{jsxref("Boolean")}} で、 true は値が {{domxref("HTMLInputElement")}} または {{domxref("HTMLTextAreaElement")}} オブジェクトの maxlength で指定された長さを超えていることを示し、 false は長さがその最長値以下であることを示します。 注: Gecko ではこのプロパティが true になることはありません。要素の値の長さが maxlength を超えないようになっているからです。 true の場合、その要素は CSS の {{cssxref(":invalid")}} および {{cssxref(":out-of-range")}} の各擬似クラスに一致します。
+
{{domxref("ValidityState.tooShort", "tooShort")}} {{ReadOnlyInline}}
+
{{jsxref("Boolean")}} で、 true は値が {{domxref("HTMLInputElement")}} または {{domxref("HTMLTextAreaElement")}} オブジェクトの minlength で指定された長さに満たないことを示し、 false は長さがその最短値以上であることを示します。 true の場合、その要素は CSS の {{cssxref(":invalid")}} および {{cssxref(":out-of-range")}} の各擬似クラスに一致します。
+
{{domxref("ValidityState.typeMismatch", "typeMismatch")}} {{ReadOnlyInline}}
+
{{jsxref("Boolean")}} で、 true は値が ({{htmlattrxref("type", "input")}} が email または url の場合に) 要求された構文に合っていないことを示し、false は構文が正しいことを示します。 true の場合、その要素は CSS の {{cssxref(":invalid")}} 擬似クラスに一致します。
+
valid {{ReadOnlyInline}}
+
{{jsxref("Boolean")}} で、 true はその要素がすべての制約検証に適合し、合格したとみられることを示し、 false はいずれかの制約に適合しなかったことを示します。 true の場合、 CSS の {{cssxref(":valid")}} 擬似クラスに一致します。それ以外の場合は CSS の {{cssxref(":invalid")}} 擬似クラスに一致します。
+
{{domxref("ValidityState.valueMissing", "valueMissing")}} {{ReadOnlyInline}}
+
{{jsxref("Boolean")}} で、 true はその要素に {{htmlattrxref("required", "input")}} 属性があるものの、値がないことを示し、 false はそうではないことを示します。 true の場合、その要素は CSS の {{cssxref(":invalid")}} 擬似クラスに一致します。
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('HTML WHATWG', 'form-control-infrastructure.html#validitystate', 'ValidityState') }}{{Spec2('HTML WHATWG')}}現行の標準
{{ SpecName('HTML5.1', 'sec-forms.html#validitystate-validitystate', 'ValidityState') }}{{Spec2('HTML5.1')}}前回のスナップショット {{SpecName('HTML5 W3C')}} から変更なし
{{ SpecName('HTML5 W3C', 'forms.html#validitystate', 'ValidityState') }}{{Spec2('HTML5 W3C')}}このインターフェイスを含む {{SpecName('HTML WHATWG')}} の最初のスナップショット
+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/api/validitystate/patternmismatch/index.html b/files/ja/web/api/validitystate/patternmismatch/index.html deleted file mode 100644 index 5db71d2c49..0000000000 --- a/files/ja/web/api/validitystate/patternmismatch/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -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")}}

- -

関連情報

- - diff --git a/files/ja/web/api/validitystate/patternmismatch/index.md b/files/ja/web/api/validitystate/patternmismatch/index.md new file mode 100644 index 0000000000..5db71d2c49 --- /dev/null +++ b/files/ja/web/api/validitystate/patternmismatch/index.md @@ -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")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/validitystate/toolong/index.html b/files/ja/web/api/validitystate/toolong/index.html deleted file mode 100644 index d306cdb9a9..0000000000 --- a/files/ja/web/api/validitystate/toolong/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: ValidityState.tooLong -slug: Web/API/ValidityState/tooLong -tags: - - API - - Constraint Validation API - - DOM - - Property - - Reference -translation_of: Web/API/ValidityState/tooLong ---- -

読み取り専用のプロパティ ValidityState.tooLong は、 - - -{{HTMLElement("input")}} や {{HTMLElement("textarea")}} の値が、ユーザーの編集によって、その要素の maxlength 属性で設定された最大コード単位長を超えているかどうかを示します。

- -

仕様

- - - - - - - - - - - - - - - - - - - - - - - - -
仕様書策定状況コメント
{{ SpecName('HTML WHATWG', 'constraints.html#dom-validitystate-toolong', 'ValidityState.tooLong') }}{{Spec2('HTML WHATWG')}} 
{{ SpecName('HTML5.1', '#dom-validitystate-toolong', 'ValidityState.tooLong') }}{{Spec2('HTML5.1')}} 
{{ SpecName('HTML5 W3C', 'forms.html#dom-validitystate-toolong', 'ValidityState.tooLong') }}{{Spec2('HTML5 W3C')}} 
- -

ブラウザー実装状況

- - - -

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

- -

関連情報

- - diff --git a/files/ja/web/api/validitystate/toolong/index.md b/files/ja/web/api/validitystate/toolong/index.md new file mode 100644 index 0000000000..d306cdb9a9 --- /dev/null +++ b/files/ja/web/api/validitystate/toolong/index.md @@ -0,0 +1,55 @@ +--- +title: ValidityState.tooLong +slug: Web/API/ValidityState/tooLong +tags: + - API + - Constraint Validation API + - DOM + - Property + - Reference +translation_of: Web/API/ValidityState/tooLong +--- +

読み取り専用のプロパティ ValidityState.tooLong は、 + + +{{HTMLElement("input")}} や {{HTMLElement("textarea")}} の値が、ユーザーの編集によって、その要素の maxlength 属性で設定された最大コード単位長を超えているかどうかを示します。

+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{ SpecName('HTML WHATWG', 'constraints.html#dom-validitystate-toolong', 'ValidityState.tooLong') }}{{Spec2('HTML WHATWG')}} 
{{ SpecName('HTML5.1', '#dom-validitystate-toolong', 'ValidityState.tooLong') }}{{Spec2('HTML5.1')}} 
{{ SpecName('HTML5 W3C', 'forms.html#dom-validitystate-toolong', 'ValidityState.tooLong') }}{{Spec2('HTML5 W3C')}} 
+ +

ブラウザー実装状況

+ + + +

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

+ +

関連情報

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