From 4f1ba6d2c029e2f1026766f755ffffe0a6ed972a Mon Sep 17 00:00:00 2001 From: Roma Zvarich Date: Sun, 18 Jul 2021 14:18:00 +0300 Subject: Перевод "Validitystate" и дочерних статей (#1531) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 'ValidityState' topic * 'badInput' topic * 'patternMismatch' topic * 'range overflow' article * 'range underflow' article * 'step mismatch' article * 'Too long' article * 'Too short' article * 'Type mismatch' article * 'Read only' fix * Typo fix * Update files/ru/web/api/validitystate/badinput/index.html Co-authored-by: Maxim Postautov <54762420+mpstv@users.noreply.github.com> * Update files/ru/web/api/validitystate/badinput/index.html Co-authored-by: Maxim Postautov <54762420+mpstv@users.noreply.github.com> * Update files/ru/web/api/validitystate/index.html Co-authored-by: Maxim Postautov <54762420+mpstv@users.noreply.github.com> * Update files/ru/web/api/validitystate/index.html Co-authored-by: Maxim Postautov <54762420+mpstv@users.noreply.github.com> * Update files/ru/web/api/validitystate/stepmismatch/index.html Co-authored-by: Maxim Postautov <54762420+mpstv@users.noreply.github.com> * Update files/ru/web/api/validitystate/index.html Co-authored-by: Maxim Postautov <54762420+mpstv@users.noreply.github.com> * Update files/ru/web/api/validitystate/toolong/index.html Co-authored-by: Maxim Postautov <54762420+mpstv@users.noreply.github.com> * Update files/ru/web/api/validitystate/typemismatch/index.html Co-authored-by: Maxim Postautov <54762420+mpstv@users.noreply.github.com> * Update files/ru/web/api/validitystate/typemismatch/index.html Co-authored-by: Maxim Postautov <54762420+mpstv@users.noreply.github.com> * Update files/ru/web/api/validitystate/typemismatch/index.html Co-authored-by: Maxim Postautov <54762420+mpstv@users.noreply.github.com> Co-authored-by: Maxim Postautov <54762420+mpstv@users.noreply.github.com> --- files/ru/web/api/validitystate/badinput/index.html | 42 +++++++++++ files/ru/web/api/validitystate/index.html | 58 +++++++++++++++ .../api/validitystate/patternmismatch/index.html | 58 +++++++++++++++ .../web/api/validitystate/rangeoverflow/index.html | 38 ++++++++++ .../api/validitystate/rangeunderflow/index.html | 38 ++++++++++ .../web/api/validitystate/stepmismatch/index.html | 38 ++++++++++ files/ru/web/api/validitystate/toolong/index.html | 30 ++++++++ files/ru/web/api/validitystate/tooshort/index.html | 21 ++++++ .../web/api/validitystate/typemismatch/index.html | 84 ++++++++++++++++++++++ 9 files changed, 407 insertions(+) create mode 100644 files/ru/web/api/validitystate/badinput/index.html create mode 100644 files/ru/web/api/validitystate/index.html create mode 100644 files/ru/web/api/validitystate/patternmismatch/index.html create mode 100644 files/ru/web/api/validitystate/rangeoverflow/index.html create mode 100644 files/ru/web/api/validitystate/rangeunderflow/index.html create mode 100644 files/ru/web/api/validitystate/stepmismatch/index.html create mode 100644 files/ru/web/api/validitystate/toolong/index.html create mode 100644 files/ru/web/api/validitystate/tooshort/index.html create mode 100644 files/ru/web/api/validitystate/typemismatch/index.html (limited to 'files') diff --git a/files/ru/web/api/validitystate/badinput/index.html b/files/ru/web/api/validitystate/badinput/index.html new file mode 100644 index 0000000000..107bbd32bb --- /dev/null +++ b/files/ru/web/api/validitystate/badinput/index.html @@ -0,0 +1,42 @@ +--- +title: validityState.badInput +slug: Web/API/ValidityState/badInput +tags: + - API + - Constraints API + - HTML DOM + - Свойство + - Только для чтения + - ValidityState +browser-compat: api.ValidityState.badInput +--- +

{{APIRef("HTML DOM")}}

+ +

Доступное только для чтения свойство badInput объекта ValidityState, указывающее, что пользователь ввёл значение, которое браузер не может преобразовать. Например, поле ввода чисел, содержащее строку. Примечание: Во всех браузерах, кроме 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.");
+}
+
+ +

Спецификации

+ +{{Specifications}} + +

Совместимость с браузерами

+ +

{{Compat}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/validitystate/index.html b/files/ru/web/api/validitystate/index.html new file mode 100644 index 0000000000..77755c915f --- /dev/null +++ b/files/ru/web/api/validitystate/index.html @@ -0,0 +1,58 @@ +--- +title: ValidityState +slug: Web/API/ValidityState +tags: + - API + - Constraint Validation API + - Формы + - HTML DOM + - Интерфейс +browser-compat: api.ValidityState +--- +
{{APIRef("HTML DOM")}}
+ +

Интерфейс ValidityState представляет состояния валидности, в которых может находиться элемент при валидации ограничений. Вместе они помогают понять, по какой именно причине значение элемента не прошло валидацию.

+ +

Свойства

+ +

Если свойство возвращает 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")}} (то есть, не делится без остатка на значение шага). false, если соответствует этим правилам. Если true, элемент соответствует CSS-псевдоклассам {{cssxref(":invalid")}} и {{cssxref(":out-of-range")}}.
+
{{domxref("ValidityState.tooLong", "tooLong")}} {{ReadOnlyInline}}
+
{{jsxref("Boolean")}} true, если значение превышает лимит, указанный в атрибуте maxlength объектов {{domxref("HTMLInputElement")}} или {{domxref("HTMLTextAreaElement")}}. false, если длина меньше или равна максимальной длине. Примечание: Данное свойство никогда не будет true в Gecko, потому что значению элемента не разрешается быть больше maxlength. Если true, элемент соответствует CSS-псевдоклассам {{cssxref(":invalid")}} и {{cssxref(":out-of-range")}}.
+
{{domxref("ValidityState.tooShort", "tooShort")}} {{ReadOnlyInline}}
+
{{jsxref("Boolean")}} true, если длина значения не достигает минимума, указанного в атрибуте minlength объектов {{domxref("HTMLInputElement")}} и {{domxref("HTMLTextAreaElement")}}. 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")}}; иначе — псевдоклассу {{cssxref(":invalid")}}.
+
{{domxref("ValidityState.valueMissing", "valueMissing")}} {{ReadOnlyInline}}
+
{{jsxref("Boolean")}} true, если у элемента есть атрибут {{htmlattrxref("required", "input")}}, но сам элемент заполнен не был. false, если элемент был заполнен. Если true, элемент соответствует CSS-псевдоклассу {{cssxref(":invalid")}}.
+
+ +

Спецификации

+ +{{Specifications}} + +

Совместимость с браузером

+ +

{{Compat}}

+ +

Также смотрите

+ + diff --git a/files/ru/web/api/validitystate/patternmismatch/index.html b/files/ru/web/api/validitystate/patternmismatch/index.html new file mode 100644 index 0000000000..ebe0e1aac1 --- /dev/null +++ b/files/ru/web/api/validitystate/patternmismatch/index.html @@ -0,0 +1,58 @@ +--- +title: ValidityState.patternMismatch +slug: Web/API/ValidityState/patternMismatch +tags: + - API + - Constraint Validation API + - DOM + - Property + - Reference +browser-compat: api.ValidityState.patternMismatch +--- +

{{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, свойство patternMismatch будет true.

+ +

Примеры

+ +

Учитывая следующее:

+ +
<p>
+ <label>Enter your phone number in the format (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 поля для номера телефона северной Америки, помещённых внутрь label. В каждом поле, как определено в атрибуте pattern, ожидается ввод 3, 3 и 4 символов соответственно.

+ +

Если значения слишком длинные, слишком короткие или содержат не цифровые символы, patternMismatch будет true. Если true, элемент соответствует CSS-псевдоклассу{{cssxref(":invalid")}}.

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

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

+ +

Обратите внимание, что в данном примере мы получаем значение свойства patternMismatch, а не {{domxref('validityState.tooLong')}} или {{domxref('validityState.tooShort')}}, потому что ограничения заданы именно с помощью атрибута pattern. Если бы вместо него использовались атрибуты minlength и maxlength, для валидации можно было использовать {{domxref('validityState.tooLong')}} или {{domxref('validityState.tooShort')}}.

+ +
+

Примечание: Если атрибут pattern не используется, поле {{HTMLElement("input/email", "email")}} требует, соответствия значения хотя бы формату x@y, а поле {{HTMLElement("input/url", "url")}} — хотя бы формату x:. Если поле не валидно, свойство {{domxref('validityState.typeMismatch')}} будет true, если не используется атрибут pattern.

+
+ +

Спецификации

+ +{{Specifications}} + +

Совместимость с браузерами

+ +

{{Compat}}

+ +

Также смотрите

+ + diff --git a/files/ru/web/api/validitystate/rangeoverflow/index.html b/files/ru/web/api/validitystate/rangeoverflow/index.html new file mode 100644 index 0000000000..bc06117b38 --- /dev/null +++ b/files/ru/web/api/validitystate/rangeoverflow/index.html @@ -0,0 +1,38 @@ +--- +title: ValidityState.rangeOverflow +slug: Web/API/ValidityState/rangeOverflow +tags: + - API + - Constraint Validation API + - DOM + - Свойство + - Справочник +browser-compat: api.ValidityState.rangeOverflow +--- +

Доступное только для чтения свойство rangeOverflow объекта ValidityState указывает, что после редактирования пользователем поля {{HTMLElement("input")}}, значение не соответствует ограничениям, установленным атрибутом max.

+ +

Если поле является числовым, включая типы {{HTMLElement("input/date", "date")}}, {{HTMLElement("input/month", "month")}}, {{HTMLElement("input/week", "week")}}, {{HTMLElement("input/time", "time")}}, {{HTMLElement("input/datetime-local", "datetime-local")}}, {{HTMLElement("input/number", "number")}}, {{HTMLElement("input/range", "range")}} и заданно значение атрибута max, если содержимое поля не соответствует ограничению атрибута max, свойство rangeOverflow будет true.

+ +

Учитывая слещующее:

+ +
<input type="number" min="20" max="40" step="2"/>
+ +

если value > 40, rangeOverflow будет true. Если true, элемент соответствует CSS-псевдоклассам {{cssxref(":invalid")}} и {{cssxref(":out-of-range")}}.

+ +

Спецификации

+ +{{Specifications}} + +

Совместимость с браузерами

+ +

{{Compat}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/validitystate/rangeunderflow/index.html b/files/ru/web/api/validitystate/rangeunderflow/index.html new file mode 100644 index 0000000000..38fa11c8c8 --- /dev/null +++ b/files/ru/web/api/validitystate/rangeunderflow/index.html @@ -0,0 +1,38 @@ +--- +title: ValidityState.rangeUnderflow +slug: Web/API/ValidityState/rangeUnderflow +tags: + - API + - Constraint Validation API + - DOM + - Свойство + - Справочник +browser-compat: api.ValidityState.rangeUnderflow +--- +

Доступное только для чтения свойство rangeUnderflow объекта ValidityState указывает, соответствует ли значение {{HTMLElement("input")}} после изменения пользователем ограничениям, установленным атрибутом min.

+ +

Если поле является числовым, включая типы {{HTMLElement("input/date", "date")}}, {{HTMLElement("input/month", "month")}}, {{HTMLElement("input/week", "week")}}, {{HTMLElement("input/time", "time")}}, {{HTMLElement("input/datetime-local", "datetime-local")}}, {{HTMLElement("input/number", "number")}}, {{HTMLElement("input/range", "range")}} и заданно значение атрибута min, если содержимое поля не соответствует ограничению атрибута min, свойство rangeUnderflow будет true.

+ +

Учитывая следующее:

+ +
<input type="number" min="20" max="40" step="2"/>
+ +

если value < 20, rangeUnderflow будет true. Если true, элемент соответствует CSS-псевдоклассам {{cssxref(":invalid")}} и {{cssxref(":out-of-range")}}.

+ +

Спецификации

+ +{{Specifications}} + +

Совместимость с браузерами

+ +

{{Compat}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/validitystate/stepmismatch/index.html b/files/ru/web/api/validitystate/stepmismatch/index.html new file mode 100644 index 0000000000..3a29e316b5 --- /dev/null +++ b/files/ru/web/api/validitystate/stepmismatch/index.html @@ -0,0 +1,38 @@ +--- +title: ValidityState.stepMismatch +slug: Web/API/ValidityState/stepMismatch +tags: + - API + - Constraint Validation API + - DOM + - Свойство + - Справочник +browser-compat: api.ValidityState.stepMismatch +--- +

Доступное только для чтения свойство stepMismatch объекта ValidityState указывает, соответствует ли значение {{HTMLElement("input")}} после изменения пользователем ограничениям, установленным атрибутом step.

+ +

Если поле является числовым, включая типы {{HTMLElement("input/date", "date")}}, {{HTMLElement("input/month", "month")}}, {{HTMLElement("input/week", "week")}}, {{HTMLElement("input/time", "time")}}, {{HTMLElement("input/datetime-local", "datetime-local")}}, {{HTMLElement("input/number", "number")}}, {{HTMLElement("input/range", "range")}} и значение атрибута step не равно any, в случае не соответствия поля ограниченям атрибутов step и min, то stepMismatch будет true. Если остаток от деления значения элемента формы за вычетом min на step, (которое по умолчаиню равно 1) не равен нулю, то это является несоответствием.

+ +

Учитывая следующее:

+ +
<input type="number" min="20" max="40" step="2"/>
+ +

если (value - min) % 2 != 0, stepMismatch будет true.

+ +

Если true, элемент соответствует CSS-псевдоклассам {{cssxref(":invalid")}} и {{cssxref(":out-of-range")}}.

+ +

Спецификации

+ +{{Specifications}} + +

Совместимость с браузерами

+ +

{{Compat}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/validitystate/toolong/index.html b/files/ru/web/api/validitystate/toolong/index.html new file mode 100644 index 0000000000..d824c67dcb --- /dev/null +++ b/files/ru/web/api/validitystate/toolong/index.html @@ -0,0 +1,30 @@ +--- +title: validityState.tooLong +slug: Web/API/ValidityState/tooLong +tags: + - API + - Constraint Validation API + - DOM + - Нужны примеры + - Свойство + - Справочник +browser-compat: api.ValidityState.tooLong +--- +
{{draft}}
+ +

Доступное только для чтения свойство tooLong объекта ValidityState указывает, превышает ли длина значения {{HTMLElement("input")}} или {{HTMLElement("textarea")}}, после редактирования пользователем, заданный в атрибуте maxlength максимум.

+ +

Спецификации

+ +{{Specifications}} + +

Совместимость с браузерами

+ +

{{Compat}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/validitystate/tooshort/index.html b/files/ru/web/api/validitystate/tooshort/index.html new file mode 100644 index 0000000000..22af754fb4 --- /dev/null +++ b/files/ru/web/api/validitystate/tooshort/index.html @@ -0,0 +1,21 @@ +--- +title: validityState.tooShort +slug: Web/API/ValidityState/tooShort +browser-compat: api.ValidityState.tooShort +--- +

Доступное только для чтения свойство tooShort объекта ValidityState указывает, является ли длина изменённого пользователем значения {{HTMLElement("input")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("output")}}, {{HTMLElement("fieldset")}} или {{HTMLElement("textarea")}} меньше минимально допустимого значения, заданного в атрибуте minlength.

+ +

Спецификации

+ +{{Specifications}} + +

Совместимость с браузерами

+ +

{{Compat}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/validitystate/typemismatch/index.html b/files/ru/web/api/validitystate/typemismatch/index.html new file mode 100644 index 0000000000..d641ea673b --- /dev/null +++ b/files/ru/web/api/validitystate/typemismatch/index.html @@ -0,0 +1,84 @@ +--- +title: ValidityState.typeMismatch +slug: Web/API/ValidityState/typeMismatch +tags: + - API + - Constraint Validation API + - DOM + - Свойство + - Справочник +browser-compat: api.ValidityState.typeMismatch +--- +

{{draft}}Доступное только для чтения свойство typeMismatch объекта ValidityState указывает, соответствует ли изменённое пользователем значение {{HTMLElement("input")}} ограничениям атрибута type.

+ +

Если атрибут type получает типы вроде {{HTMLElement("input/email", "email")}} или {{HTMLElement("input/url", "url")}}, а значение не соответствует ограничениям данного типа, свойство typeMismatch будет true.

+ +

Тип {{HTMLElement("input/email", "email")}} допускает ввод одного или нескольких email-адресов, в зависимости от наличия атрибута multiple. Валидный email-адрес включает префикс электронной почты и домен, с доменом верхнего уровня или без него. Если значение поля email-адреса не является пустой строкой, одним или несколькими email-адресами, разделёнными запятой (если присутствует атрибут multiple), то это typeMismatch.

+ +

Тип {{HTMLElement("input/url", "url")}} допускает ввода одного или нескольких url-адресов, в зависимости от наличия атрибута multiple. Валидный URL-адрес включает протокол с IP-адресом или комбинацией поддоменом, домена и домен верхнего уровня. Если значение поля URL не ялвяется пустой строкой, одним или несколькими URL-адресами, разделёнными запятой (если присутствует атрибут multiple), то это typeMismatch.

+ + + + + + + + + + + + + + + + + + + + + + +
Соответствие атрибуту type
Тип inputЗначениеОжидаемое значение
{{HTMLElement("input/email", "email")}}x@y или x@y.zEmail-адрес с или без TLD
{{HTMLElement("input/url", "url")}}x: или x://y.zПротокол или полный URL с протоколом
+ +

Примеры

+ +

Учитывая следующее:

+ +
<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;
+}
+ +

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

+ +

В примере выше в обоих полях происходит typeMismatch, потому что email-адрес является просто доменом, а URL не содержит протокол

+ +

typeMismatch происходит при несоответствии значения, заданного в атрибуте type и содержимым поля. typeMismatch является лишь одной из возможных ошибок и возможна только для полей {{HTMLElement("input/email", "email")}} и {{HTMLElement("input/url", "url")}}. Когда введённое значение не соответствует ожидаемому для других полей ввода, в зависимости от типа поля будут возникать разные ошибки. Например, если в поле {{HTMLElement("input/number", "number")}} ввести значение не являющееся числом с плавающей запятой, badInput будет true. Если обязательное поле email не заполнено, {{domxref('ValidityState.valueMissing','valueMissing')}} будет true.

+ +

Спецификации

+ +{{Specifications}} + +

Совместимость с браузерами

+ +

{{Compat}}

+ +

Смотрите также

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