Html 名称为''；不可聚焦

在谷歌浏览器中，一些客户无法进入我的付款页面。 尝试提交表单时，我遇到以下错误：

名称为“”的无效表单控件不可聚焦

这是来自JavaScript控制台的

我了解到问题可能是由于隐藏字段具有必需的属性。 现在的问题是，我们使用的是.NETWebForms必需的字段验证器，而不是HTML5Required属性

谁会犯这个错误似乎是随机的。

---

是否有人知道此问题的解决方案？

在表单中添加

novalidate

属性将有助于：

<form name="myform" novalidate>

---

如果其他人有这个问题，我也会经历同样的事情。如评论中所述，这是由于浏览器试图验证隐藏字段。它在表单中查找空字段并试图关注它们，但因为它们被设置为

display:none，它不能。因此出现了错误

我用类似的方法解决了这个问题：

$("body").on("submit", ".myForm", function(evt) {

    // Disable things that we don't want to validate.
    $(["input:hidden, textarea:hidden, select:hidden"]).attr("disabled", true);

    // If HTML5 Validation is available let it run. Otherwise prevent default.
    if (this.el.checkValidity && !this.el.checkValidity()) {
        // Re-enable things that we previously disabled.
        $(["input:hidden, textarea:hidden, select:hidden"]).attr("disabled", false);
        return true;
    }
    evt.preventDefault();

    // Re-enable things that we previously disabled.
    $(["input:hidden, textarea:hidden, select:hidden"]).attr("disabled", false);

    // Whatever other form processing stuff goes here.
});

此外，这可能是您的
表单中的的副本，您可能隐藏了
输入
具有
必需的
属性：





表单
无法关注这些元素，您必须从所有隐藏的输入中删除
必需的
，或者在javascript中实现验证函数来处理它们（如果您确实需要隐藏的输入）。
如果您有这样的代码，它将显示该消息：

<form>
  <div style="display: none;">
    <input name="test" type="text" required/>
  </div>

  <input type="submit"/>
</form>

您可以尝试
.removeAttribute（“必需”）
删除加载窗口时隐藏的元素。由于javascript（选项卡式表单）的原因，很可能有问题的元素被标记为隐藏

e、 g

这应该可以完成任务

它对我有用。。。干杯
或者，另一个简单的答案是使用HTML5占位符属性，这样就不需要使用任何js验证

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



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

希望有帮助。我完全同意这个解决方案
 如果表单字段未通过验证，则Chrome上会出现此问题，但由于相应的无效控件不可聚焦，浏览器尝试在其旁边显示消息“请填写此字段”也会失败

表单控件在触发验证时可能不可聚焦，原因有多种。下面描述的两种情况是最突出的原因：


根据业务逻辑的当前上下文，该字段是不相关的。在这种情况下，相应的控件应该被禁用或从DOM中删除，或者不在此时使用
required
属性进行标记


用户按输入上的ENTER键可能会导致过早验证。或者用户单击表单中未正确定义控件属性的按钮/输入控件。如果按钮的类型属性未设置为按钮，则每次单击按钮时，Chrome（或任何其他浏览器）都会执行验证，因为提交是按钮的类型属性的默认值



要解决此问题，如果您的页面上有一个按钮执行的不是提交或重置，请务必记住执行此操作：

另请参见
，当有一个值为“”的带有预选选项的
字段时，会发生这种情况：


挑选
酒吧
巴兹

不幸的是，它是占位符（）的唯一跨浏览器解决方案

这个问题出现在Chrome 43.0.2357.124上
 前面的答案都不适用于我，我也没有任何带有
required
属性的隐藏字段

在我的例子中，这个问题是由一个
和一个
作为它的第一个子项引起的，它用
required
属性保存
。删除
解决了问题。或者你可以用它来包装你的表格；这是HTML5允许的

我使用的是Windows 7 x64，Chrome版本43.0.2357.130 m。
如果您有任何具有必填属性的字段在表单提交过程中不可见，则将抛出此错误。当您试图隐藏该字段时，只需删除必需的属性。如果要再次显示字段，可以添加所需的属性。通过这种方式，您的验证不会受到影响，同时也不会抛出错误
 用于角度：

ng required=“boolean”

如果该值为true，则仅应用html5“required”属性

<input ng-model="myCtrl.item" ng-required="myCtrl.items > 0" />

如果您在复选框输入中遇到错误，则还有另一种可能性。如果您的复选框使用自定义CSS隐藏默认值并用其他样式替换它，这也会触发Chrome on validation错误中的不可聚焦错误

我在样式表中发现：

input[type="checkbox"] {
    visibility: hidden;
}

简单的修复方法是将其替换为以下内容：

input[type="checkbox"] {
    opacity: 0;
}

选择2 Jquery问题

问题是由于HTML5验证无法聚焦隐藏的无效元素。
我在处理jQuery Select2插件时遇到了这个问题

解决方案
您可以在表单的每个元素上插入一个事件侦听器和“无效”事件，以便在HTML5验证事件之前进行操作

$('form select').each(function(i){
this.addEventListener('invalid', function(e){            
        var _s2Id = 's2id_'+e.target.id; //s2 autosuggest html ul li element id
        var _posS2 = $('#'+_s2Id).position();
        //get the current position of respective select2
        $('#'+_s2Id+' ul').addClass('_invalid'); //add this class with border:1px solid red;
        //this will reposition the hidden select2 just behind the actual select2 autosuggest field with z-index = -1
        $('#'+e.target.id).attr('style','display:block !important;position:absolute;z-index:-1;top:'+(_posS2.top-$('#'+_s2Id).outerHeight()-24)+'px;left:'+(_posS2.left-($('#'+_s2Id).width()/2))+'px;');
        /*
        //Adjust the left and top position accordingly 
        */
        //remove invalid class after 3 seconds
        setTimeout(function(){
            $('#'+_s2Id+' ul').removeClass('_invalid');
        },3000);            
        return true;
}, false);          
});

是的。。如果隐藏表单控件具有必填字段，则会显示此错误。一种解决方案是禁用此表单控件。这是因为通常情况下，如果隐藏表单控件，这是因为您不关心它的值。所以
input[type="checkbox"] {
    opacity: 0;
}

$('form select').each(function(i){
this.addEventListener('invalid', function(e){            
        var _s2Id = 's2id_'+e.target.id; //s2 autosuggest html ul li element id
        var _posS2 = $('#'+_s2Id).position();
        //get the current position of respective select2
        $('#'+_s2Id+' ul').addClass('_invalid'); //add this class with border:1px solid red;
        //this will reposition the hidden select2 just behind the actual select2 autosuggest field with z-index = -1
        $('#'+e.target.id).attr('style','display:block !important;position:absolute;z-index:-1;top:'+(_posS2.top-$('#'+_s2Id).outerHeight()-24)+'px;left:'+(_posS2.left-($('#'+_s2Id).width()/2))+'px;');
        /*
        //Adjust the left and top position accordingly 
        */
        //remove invalid class after 3 seconds
        setTimeout(function(){
            $('#'+_s2Id+' ul').removeClass('_invalid');
        },3000);            
        return true;
}, false);          
});

  select.download_tag{
     display: block !important;//because otherwise, its throwing error An invalid form control with name='download_tag[0][]' is not focusable.
    //So, instead set opacity
    opacity: 0;
    height: 0px;

 }

submitHandler() {
    const form = document.body.querySelector('#formId');

    // Fix issue with html5 validation
    if (form.checkValidity && !form.checkValidity()) {
      return;
    }

    // Submit and hide form safely
  }

<form method="POST" name='register' action="#handler">


<input type="email" name="email"/>
<input type="text" name="message" />
<input type="date" name="date" />

<form method="POST" name='register' action="#register">
<input type="text" name="userId" />
<input type="password" name="password" />
<input type="password" name="confirm" />

</form>

   Use this:

$("#periodo-container").show(); //for making sure it is visible
$('#periodo').removeAttr('required'); 
$("#periodo-container").hide(); //then hide

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

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

<input type="number" min="1900" max="2090" />

<input type="datetime-local" />

<input type="text" />

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

<div style="display:none;">
   <input type="number" name="some" min="1" max="50" value="0">
</div>