Тип ввода = "текст" проверка максимальной длины игнорируется при отправке формы - PullRequest
Новая
       7

Тип ввода = "текст" проверка максимальной длины игнорируется при отправке формы

1 голос
/ 19 марта 2020

Атрибут maxlength для входных данных и текстовых областей отлично работает для пользовательского ввода, но когда я изменяю значение с помощью Javascript или задаю его с помощью value="..." и отправляю форму впоследствии, проверка не применяется: 

<form action="#">
  <input type="text" maxlength="5" value="Longer than 5 chars">
  <input type="submit">
</form>

Почему это не дает сбоя?

Сравните с вводом чисел, где форма не соответствует ожидаемой: 

<form action="#">
  <input type="number" max="4" value="8">
  <input type="submit">
</form>

Согласно MDN ,

[maxlength] Проверка ограничения применяется только тогда, когда значение изменяется пользователем .

Но почему? И можно ли это решить без Javascript? Кажется излишним проверять максимальную длину в двух разных местах, сначала в HTML, а затем в Javascript.

Для каких атрибутов применяется эта проблема проверки? maxlength, minlength и другие ...? Количество входов? Дата ввода? Есть ли список тех, так что я знаю, какие из них мне нужно проверить вручную?

Редактировать : Вот более конкретный c вариант использования: 

function addChar() {
  document.querySelector('input[type="text"]').value += 'a';
}
<form action="#">
  <input type="text" maxlength="5" value="a">
  <input type="submit">
</form>
<button onclick="addChar()">Add another character</button>

Пользователь может пару раз нажать кнопку «Добавить другого персонажа» и затем отправить форму. Это не подведет. Если я хочу запретить пользователю добавлять слишком много символов, мне нужно добавить пользовательскую проверку Javascript: 

function addChar() {
  var input = document.querySelector('input[type="text"]');
  if(input.value.length > input.maxLength) {
    return;
  }
  input.value += 'a';
}
<form action="#">
  <input type="text" maxlength="5" value="a">
  <input type="submit">
 </form>
 <button onclick="addChar()">Add another character</button>

А теперь в коде есть проверка для maxlength два раза. Это не кажется правильным и противоречивым по сравнению с другими ограничениями допустимости (например, ввод числа max выше)

1 Ответ

1 голос
/ 19 марта 2020

Для определенных типов input атрибут pattern может быть наиболее полезным в данной конкретной ситуации, поскольку, как вы определили, spe c по-разному относится к maxlength и minlength что касается проверки ограничений.

И minlength, и maxlength требуют, чтобы пользовательский ввод для dirty value flag был поднят, вызывая недопустимое состояние и, таким образом, принудительно проверяя при отправке. Установка значения с помощью сценария не поднимает флаг:

Однако атрибут pattern не имеет этого уникального требования и, следовательно, будет проверяться при отправке формы, кажется, см. пример ниже: 

function addChar() {
  var input = document.querySelector('input[type="text"]');
  input.value += 'a';
}
input:invalid {
  border: 1px solid crimson;
}
<form action="#">
  <input type="text" value="a" pattern=".{1,5}" title="You may only include a maximum of 5 characters.">
  <input type="submit">
</form>
<button onclick="addChar()">Add another character</button>
...