4

Есть такой input :

<input type="text" class="first-name" placeholder="Имя"pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{1,20}$" required>

Сейчас оно выводит сообщение : "Пожалуйста, используйте требуемый формат";

Как можно сделать так, что бы при ошибке оно выводило, например : "Имя должно содержать 2-20 символов"?'

Спасибо

5
  • каждый браузер имеет свой формат обработки required - для общей стилизации отключите этот атрибут и используйте проверку через javascript/php например
    – lexxl
    7 мая 2016 в 19:42
  • Изменить текст нельзя, это UI браузера. Да и вид уведомлений изменить без костылей сложно. Use the JS+CSS, Luke!
    – user207618
    7 мая 2016 в 19:54
  • Ответил на вопрос. Используйте setCustomValidity для данной задачи 7 мая 2016 в 20:15
  • Не знаю почему, но на всех браузерах работает, кроме Яндекс браузера... довольно странно...
    – Марат
    14 июн 2018 в 20:30
  • Вы про setCustomValidity? У меня в я.браузере работает. А вот в Safari - ожидаемо нет.
    – vp_arth
    14 июн 2018 в 21:31

1 ответ 1

2

Можете сделать вот таким образом:

<form>
  <input type="text" pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{1,20}$" required oninvalid="setCustomValidity('Имя должно содержать 2-20 символов')" oninput="setCustomValidity('')" />
  <input type="submit" />
</form>

2

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.