我希望在这个冗长的答案种子中没有遗漏我的场景是一些非常奇怪的事情。

我有div元素，动态更新通过对话框被调用在他们加载和得到行动。

简而言之，div id有

<div id="name${instance.username}"/>

我有一个用户:测试帐户，出于某种原因，编码在java脚本世界中做了一些奇怪的事情。我收到了在其他地方工作的表单的错误消息。

缩小到这个范围，重新测试使用数字代替，即id似乎解决了这个问题。

我来说明一下我的情况，因为它不同于上面所有的解。我有一个html标签没有正确关闭。元素不是必需的，但它嵌入在一个隐藏的div中

在我的案例中，问题在于type="datetime-local"，出于某种原因，它在表单提交时被验证。

我改变了这个

<input type="datetime-local" />

到

<input type="text" />

对我来说，这发生了，当有一个<select>字段与预选选项的值“:

<select name="foo" required="required">
    <option value="" selected="selected">Select something</option>
    <option value="bar">Bar</option>
    <option value="baz">Baz</option>
</select>

不幸的是，它是占位符的唯一跨浏览器解决方案(我如何为“选择”框做一个占位符?)

Chrome 43.0.2357.124出现此问题。

奇怪的是，每个人都建议删除验证，而验证的存在是有原因的…… 不管怎样，如果你在使用一个自定义控件，并且想要维护验证，你可以这样做:

第一步。从输入中删除无显示，因此输入变得可聚焦

.input[required], .textarea[required] {
    display: inline-block !important;
    height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    z-index: -1 !important;
    position: absolute !important;
}

第二步骤。如果样式不够，则在特定情况下的输入上添加无效事件处理程序

inputEl.addEventListener('invalid', function(e){
   //if it's valid, cancel the event
   if(e.target.value) {
       e.preventDefault();
   }
}); 

在你的表单中，你可能有隐藏的输入需要的属性:

<input type="hidden" required /> <input type="file" required style="display: none;"/>

表单不能专注于这些元素，你必须从所有隐藏的输入中删除required，或者在javascript中实现一个验证函数来处理它们，如果你真的需要一个隐藏的输入。

如果隐藏具有必填属性的输入元素，就会发生这种情况。

不使用display:none，你可以使用不透明度:0;

我还必须使用一些CSS规则(如position:absolute)来完美地定位我的元素。