По умолчанию Chrome MinLength Error

Question

У меня есть поле input, через которое пользователи могут отправлять некоторые данные.

Но если длина символа данных меньше 10, они не смогут отправлять.

<input type="text" minlength="10" placeholder="Submit" class="dataSubmit" />

Это означает, что если пользователь пытается отправить данные длиной менее 10 символов, Google Chrome отображает эту ошибку Please lengthen this text to 10 characters or more (you're currently using 3 characters).

Но я хочу изменить это сообщение об ошибке на More data required.

Итак, как я могу изменить это сообщение по умолчанию?

Спасибо!

Answer 1

Мы можем определить id для ввода и добавить настраиваемую проверку с помощью JavaScript.

<input id="data" type="text" minlength="10" placeholder="Submit" class="dataSubmit" />

В JavaScript мы можем добавить настраиваемую проверку для ввода, как показано ниже:

var data = document.getElementById("data");
data.addEventListener("input", function (event) {
  if (data.validity.typeMismatch) {
    data.setCustomValidity("Updated Error message");
  } else {
    data.setCustomValidity("");
  }
});