HTML5 required 属性似乎不起作用答案

【问题标题】：HTML5 required attribute seems not workingHTML5 required 属性似乎不起作用
【发布时间】：2013-07-31 17:49:57
【问题描述】：

我不明白为什么 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 5？
你的输入框和按钮周围有表格吗？
您的输入是否在form 中，您是否使用<!DOCTYPE HTML>？
是的，我已经将我的文档声明为html5，现在可以了，我必须将它包含在form 标记中。谢谢大家的关心:)

标签： html required

【解决方案1】：

确保没有为您的表单标签设置 novalidate 属性

【讨论】：

有趣；我通常在构建 Web 应用程序时使用 Rails 框架，直到今天我才发现我的表单附加了 novalidate 属性；在阅读您的评论之前，我什至不知道要寻找这个：thumbs_up：

【解决方案2】：

尝试将其放在表单标签中并关闭输入标签：

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

【讨论】：

感谢您的输入，这解决了我的问题。我通常不会在我的输入中添加任何form 标签，因为我使用它们对应的id 或class 名称获取它们的值，但现在我知道form 标签的重要性了。
没有问题。很高兴它解决了它。如果您满意，请标记为答案。
现在不能标记，直到时间间隔达到零，呵呵。别担心。
@LDJ 我在输入字段周围放置了表单标签，但它不起作用。

【解决方案3】：

表单中缺少提交字段元素也会导致此错误。在 JS 处理提交表单的“按钮”字段的情况下，没有提交按钮的必要性，因此必需的不起作用

【讨论】：

这完全解释了我的问题。

【解决方案4】：

只要在按钮上添加了type="submit"就可以了。

 <form action="">
    <input type="text" placeholder="name" required>
    <button type="submit">Submit</button>
</form>

【讨论】：

【解决方案5】：

实际上，当我尝试这样做时，它只有在我为表单设置动作和方法值时才有效。有趣的是它的工作原理！

【讨论】：

【解决方案6】：

是的，你错过了表单封装：

JSFiddle

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

【讨论】：

【解决方案7】：

我的回答来不及了，但是可以帮到别人。

我遇到了同样的问题，即使我使用了表单标签。

我通过在页面标题中声明 Meta Charset 来解决它：

&lt;meta charset = "UTF-8" /&gt;

【讨论】：

【解决方案8】：

使用表单封装并添加您的按钮类型“提交”

【讨论】：

【解决方案9】：

晚了七年，但我也有类似的问题，我意识到这是由于提交表单刷新页面引起的。由于我将其设置为在提交时不自动刷新，因此我有足够的时间来查看浏览器实际上需要填充输入。

【讨论】：

【解决方案10】：

我遇到了同样的问题。在我的情况下，问题是输入标签中的 return 语句：

<input type="submit" onclick="function_call(); return false;">

删除return false; 语句解决了我的问题。

【讨论】：