Вносит финальные штрихи

html/minlength-maxlength/demos/default-input-type-number/index.html

@@ -88,6 +88,9 @@
     <label for="items">Выберите количество (максимум 999):</label>
     <input
       type="number"
+      min="1"
+      max="999"
+      maxlength="3"
       id="items"
     >
   </div>

html/minlength-maxlength/demos/fixed-input-type-number/index.html

@@ -89,7 +89,10 @@
     <input
       type="number"
       id="items"
-      onKeyPress="if(this.value.length===3) return false"
+      pattern="/^-?\d+\.?\d*$/"
+      min="1"
+      max="999"
+      onKeyPress="if(this.value.length === 3 ) return false"
     >
   </div>
 </body>

html/minlength-maxlength/index.md

@@ -8,6 +8,7 @@ contributors:
   - skorobaeus
 keywords:
   - валидация
+  - validation
 related:
   - html/input
   - html/textarea
@@ -18,18 +19,19 @@ tags:
 
 ## Кратко
 
-Атрибуты `minlength` и `maxlength` устанавливают минимальное и максимальное количество символов в полях ввода [`<input>`](/html/input/) или [`<textarea>`](/html/textarea/).
+Атрибуты `minlength` и `maxlength` устанавливают минимальное и максимальное количество символов, которые можно ввести в поля [`<input>`](/html/input/) или [`<textarea>`](/html/textarea/).
 
 ## Пример
 
 В этом примере в `<input>` можно ввести минимум 4 символа и максимум 8, а в `<textarea>` — минимум 50 и максимум 1000.
 
 ```html
 <input minlength="4" maxlength="8">
+
 <textarea minlength="50" maxlength="1000">
 ```
 
-Теперь создадим поле для пароля и ограничим количество допустимых символов:
+Теперь создадим поле с паролем и ограничим количество допустимых символов:
 
 ```html
 <label for="password">
@@ -46,27 +48,29 @@ tags:
 >
 ```
 
-<iframe title="Поле для пароля с ограничениями по количеству символов" src="demos/input-example/" height="200"></iframe>
+<iframe title="Поле для пароля с ограничениями по количеству символов" src="demos/input-example/" height="220"></iframe>
 
 ## Как пишется
 
-Значения для `minlength` и `maxlength` — целое число от 0 и выше. К примеру, `0`, `14` или `1000`. Если не указать значение или задать его неверно, у поля не будет ограничений по длине. Также значение `maxlength` не может быть меньше значения `minlength`. Поле всегда будет заполнено неправильно, если максимальное значение меньше минимального.
+Значения для `minlength` и `maxlength` — целые числа от 0 и выше. К примеру, `0`, `14` или `1000`. Если не указать значение или задать его неверно, у поля не будет ограничений по длине. Также значение `maxlength` не может быть меньше значения `minlength`. Поле всегда будет заполнено неправильно, если максимальное значение меньше минимального.
 
-Браузеры используют кодировку UTF-16 для расчёта длины поля. Это значит, что длина равна количеству символов в случае букв, чисел и знаков. Например, если задали `minlength="3"` и `maxlength="10"`, то поле с введёнными `abc` и `123` соответвуют минимальному ограничению по символам.
+Браузеры используют кодировку UTF-16 для расчёта длины поля. Это значит, что длина равна количеству символов в случае букв, чисел и знаков. Например, если задали `minlength="3"`, то поле с введёнными `abc` и `123` соответствуют минимальному ограничению по символам.
 
-`minlength` и `maxlength` часто используют вместе с другим атрибутом [`required`](/html/required/). Он делает поле обязательным.
+`minlength` и `maxlength` часто используют вместе с другим атрибутом [`required`](/html/required/), который делает поле обязательным.
 
 ### Валидация
 
-В JavaScript есть специальный интерфейс `ValidityState`, который даёт доступ к проверке полей. С помощью свойств `tooLong` и `tooShort` можно проверять длину поля с ограничениями по ней. Оба свойства возвращают `true` в случае, если пользователь ввёл слишком много или слишком мало символов, и `false`, когда у поля правильная длина. Форму лучше валидировать после нажатия на кнопку для отправки данных.
+В JavaScript есть специальный интерфейс `ValidityState`, который даёт доступ к проверке полей. С помощью свойств `tooLong` и `tooShort` можно проверять длину поля с атрибутами `minlength` и `maxlength`. Оба свойства возвращают `true`, если пользователь ввёл слишком много или слишком мало символов, и `false`, когда введённые данные правильной длины. Форму лучше валидировать после нажатия на кнопку для отправки данных.
 
 ### Странности с `<input type="number">`
 
-`minlength` и `maxlength` не ограничивают количество символов по умолчанию, когда задаёте ограничения по количеству символов для поля с типом `number`. Как и `max` и `min`. Вы всё ещё можете ввести меньшее или большее количество символов в обоих случаях.
+Когда задаёте ограничения по длине полю с типом `number`, атрибуты `minlength` и `maxlength` не ограничивают минимальное и максимальное количество символов, которое можно ввести с клавиатуры.
+
+Попробуйте ввести в этой демке что-то длиннее, чем 3 символа. Скорее всего у вас это не получится.
 
-<iframe title="Поле по умолчанию с типом number" src="demos/default-input-type-number/" height="200"></iframe>
+<iframe title="Поле по умолчанию с типом number" src="demos/default-input-type-number/" height="220"></iframe>
 
-Чтобы обойти странность, используйте JavaScript или регулярные выражения. К примеру, в это поле можем ввести только три символа. Когда попытаетесь ввести больше трёх символов, поле просто не даст вам это сделать.
+Чтобы обойти странность, используйте JavaScript или регулярные выражения. К примеру, в это поле можем ввести только 3 символа благодаря обработке события `onKeyPress`. Когда попытаетесь ввести больше символов, скрипт просто не даст это сделать.
 
 ```html
 <label for="items">
@@ -75,49 +79,45 @@ tags:
 <input
   type="number"
   id="items"
-  onKeyPress="if(this.value.length===3) return false"
+  pattern="/^-?\d+\.?\d*$/"
+  min="1"
+  max="999"
+  onKeyPress="if(this.value.length === 3) return false"
 >
 ```
 
-<iframe title="Работающее поле с типом number" src="demos/fixed-input-type-number/" height="200"></iframe>
+<iframe title="Работающее поле с типом number" src="demos/fixed-input-type-number/" height="220"></iframe>
 
 ### Стилизация
 
-Поля с неправильными данным можно стилизовать через псевдоклассы [`:invalid`](/css/invalid-valid/) для всех полей или [`:out-of-range`](/css/in-range-out-of-range/) для полей с `type="number"`.
+Поля с неправильными данными можно стилизовать через псевдоклассы [`:invalid`](/css/invalid-valid/) или `:user-invalid` для всех полей или [`:out-of-range`](/css/in-range-out-of-range/) для полей с `type="number"`.
 
 <aside>
 
-Обозначайте неверно заполненные поля не только цветом, но и описанием ошибки в виде текста рядом с этими полями.
+👩‍🎨 Добавляйте к неправильно заполненным полям не только цветную обводку и заливку, но и иконку, а также текстовое описание ошибки.
 
 </aside>
 
-К полю с `:invalid` применятся стили в пустом состоянии и в состоянии, когда в него ввели нужное количество символов.
+К полю, стилизованному через `:invalid`, стили применятся в пустом состоянии и в состоянии, когда в него ввели неправильное количество символов.
 
 ```css
-input {
-  border: 2px solid currentcolor;
-}
-
 input:invalid {
-  border: 2px dashed red;
-}
-
-input:invalid:focus {
-  background-image: linear-gradient(pink, lightgreen);
+  border-color: #2E9AFF;
+  background-color: rgb(46, 154, 255, 0.1);
+  outline: none;
 }
 ```
 
-Когда используете `required`, браузеры показывают стили для невалидных полей до тех пор, пока пользователи не введут в них правильные данные.
+<iframe title="Поле со стилями для invalid" src="demos/styled-invalid-input/" height="220"></iframe>
 
-К полю с `:out-of-range` стили сработают в случае, когда значение ниже минамального и выше максимального.
+Стили из `:user-invalid` применятся к полю только после начала ввода неправильного количества символов.
 
 ```css
-input {
-  display: block;
-  margin-top: 1em;
-}
-
-input:out-of-range {
-  background-color: orangered;
+input:user-invalid {
+  border-color: #2E9AFF;
+  background-color: rgb(46, 154, 255, 0.1);
+  outline: none;
 }
 ```
+
+<iframe title="Поле со стилями для user-invalid" src="demos/styled-userinvalid-input/" height="220"></iframe>