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

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

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

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

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

Я запускаю свой код в Google Chrome Version 28.0.1500.72.


html required
person HTTP    schedule 31.07.2013    source источник
comment
Ваш документ объявлен как HTML 5?   -  person deceze♦    schedule 31.07.2013
comment
А у вас есть форма вокруг поля ввода и кнопки?   -  person putvande    schedule 31.07.2013
comment
Вы вводите form и используете ли вы <!DOCTYPE HTML>?   -  person Uooo    schedule 31.07.2013
comment
Да, я объявил свой документ как html5, и теперь все в порядке, я должен заключить его в тег form. Спасибо, ребята, за беспокойство :)   -  person HTTP    schedule 31.07.2013

Ответы (9)


arrow_upward
45
arrow_downward

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

<form>
  <input type = "text" class = "txtPost" placeholder = "Post a question?" required />
  <button class = "btnPost btnBlue">Post</button>
</form>
person LDJ    schedule 31.07.2013
comment
Спасибо за ваш вклад, это решает мою проблему. Обычно я не добавляю никаких тегов form в свои входные данные, потому что я получаю их значения с соответствующими именами id или class, но теперь я знаю, насколько важен был тег form. - person HTTP; 31.07.2013
comment
Нет проблем. Рад, что он решил это. Пожалуйста, отметьте как ответ, если вы довольны. - person LDJ; 31.07.2013
comment
Не могу отметить сейчас, пока временной интервал не достигнет ничего, хе-хе. Не волнуйся. - person HTTP; 31.07.2013
comment
@LDJ Я поместил тег формы вокруг своего поля ввода, но он не работает. - person Praveenkumar Beedanal; 15.03.2019

arrow_upward
47
arrow_downward

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

person Jinu Joseph Daniel    schedule 03.12.2014
comment
Интересно; Обычно я использую структуру Rails при создании веб-приложений, и до сегодняшнего дня я не встречал атрибута novalidate , добавленного к моей форме; Я даже не знал, что это нужно искать, пока не прочитал ваш комментарий: thumbs_up: - person VegaStudios; 19.04.2019

arrow_upward
10
arrow_downward

Отсутствие в форме элемента поля Submit также вызывает эту ошибку. В случае поля «кнопка», обрабатываемого JS для отправки формы, отсутствует необходимость в кнопке «Отправить», следовательно, «Требуемый» не работает.

person VINOTH KUMAR    schedule 08.05.2020
comment
Это точно объясняет мою проблему. - person Betty Mock; 20.12.2020

arrow_upward
5
arrow_downward

Если вы добавили type = submit на кнопку, все в порядке.

 <form action="">
    <input type="text" placeholder="name" required>
    <button type="submit">Submit</button>
</form>
person Abaas Skills    schedule 24.12.2020

arrow_upward
3
arrow_downward

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

person Ram Kowshik    schedule 24.12.2017

arrow_upward
0
arrow_downward

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

JSFiddle

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

arrow_upward
0
arrow_downward

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

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

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

<meta charset = "UTF-8" />

person Kamal AZIZ    schedule 06.07.2019

arrow_upward
0
arrow_downward

используя инкапсуляцию формы и добавьте свой тип кнопки «отправить»

person Ardian Zack    schedule 27.09.2019

arrow_upward
0
arrow_downward

С опозданием на семь лет, но у меня похожая проблема, и я понял, что она вызвана обновлением страницы при отправке формы. Поскольку я установил автоматическое обновление при отправке, у меня было достаточно времени, чтобы увидеть, как браузер действительно требует ввода для заполнения.

person juamerico    schedule 09.06.2021