Требуемый атрибут HTML5 не работает

Я не могу понять, почему новый требуемый атрибут HTML5, похоже, не работает, и я знаю, что мой простой код, похоже, в порядке. Что делать, чтобы сделать эту работу?

Вот мой код в HTML:

<input type = "text" class = "txtPost" placeholder = "Post a question?" required>
<button class = "btnPost btnBlue">Post</button>

Исправьте меня, если я ошибаюсь, но если я запустил код в браузере и нажал кнопку без какого-либо значения в текстовом поле, у него должна быть всплывающая подсказка, показывающая, что это поле было необходимо, не так ли? Но ничего не происходит независимо от того, сколько раз вы нажимаете кнопку. Я неправильно понял, как использовать требуемый атрибут?

Я запускаю свой код в google chrome Version 28.0.1500.72.

Ответ 1

Попробуйте поместить его в тег формы и закрыть тег ввода:

<form>
  <input type = "text" class = "txtPost" placeholder = "Post a question?" required />
  <button class = "btnPost btnBlue">Post</button>
</form>

Ответ 2

Убедитесь, что атрибут novalidate не установлен в ваш тег формы

Ответ 3

На самом деле, когда я это пробовал, он работал только тогда, когда я установил значение action и method для формы. Забавно, как это работает!

Ответ 4

Да, вы пропустили инкапсуляцию формы:

JSFiddle

<form>
   <input id="tbQuestion" type="text" placeholder="Post a question?" required/>
   <input id="btnSubmit" type="submit" />
</form>

Ответ 5

Используйте тег формы
убедитесь, что внутри формы не должно быть (noValidate) это работает....

Ответ 6

Мой ответ слишком поздно, но он может помочь другим.

У меня была такая же проблема, даже когда я использовал тег формы.

Я решил это, объявив Meta Charset в заголовке страницы:

<meta charset = "UTF-8" />

Ответ 7

используя форму инкапсуляции и добавьте кнопку типа "отправить"

Ответ 8

Сообщение

Поместите это в тег формы и метод POST

Если вы используете MVC, то проверьте из jquery, если текст не заполняется, а затем автоматически возвращает сообщение