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

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

.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();
   }
}); 

或者另一个万无一失的答案是使用HTML5占位符属性，那么就不需要使用任何js验证。

<input id="elemID" name="elemName" placeholder="Some Placeholder Text" type="hidden" required="required">

Chrome将无法找到任何空的，隐藏的和需要关注的元素。简单的解决方案。

希望这能有所帮助。我完全接受这个解决方案。

我在使用Angular JS时也发现了同样的问题。这是由于与ng-hide一起使用required引起的。当我点击提交按钮，而这个元素是隐藏的，然后发生错误，无效的窗体控件与名称= "是不可聚焦的。终于!

例如，将ng-hide和required一起使用:

<input type="text" ng-hide="for some condition" required something >

我通过用ng-pattern代替所需的来解决它。

例如解决方案:

<input type="text" ng-hide="for some condition" ng-pattern="some thing" >

确保表单中具有所需属性的所有控件也具有name属性集

哇，这里有这么多答案!

如果问题是<input type="hidden" required="true" />，那么只需几行就可以解决这个问题。

逻辑简单明了:

在页面加载中用数据必需类标记每个必需输入。 在提交时，做两件事:a)在所有数据必需输入中添加required="true"。b)从所有隐藏的输入中删除required="true" '。

HTML

<input type="submit" id="submit-button">

纯JavaScript

document.querySelector('input,textarea,select').filter('[required]').classList.add('data-required');

document.querySelector('#submit-button').addEventListener('click', function(event) {
    document.querySelector('.data-required').prop('required', true);
    document.querySelector('input,textarea,select').filter('[required]:hidden').prop('required', false);
    return true;
}

jQuery

$('input,textarea,select').filter('[required]').addClass('data-required');

$('#submit-button').on('click', function(event) {
    $('.data-required').prop('required', true);
    $('input,textarea,select').filter('[required]:hidden').prop('required', false);
    return true;
}

对我来说，这发生了，当有一个<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出现此问题。