名称=''的无效表单控件不可聚焦

本文翻译自：An invalid form control with name='' is not focusable

I have an acute problem on my website. 我的网站上有一个严重的问题。 In Google Chrome some customers are not able to proceed to my payment page. 在Google Chrome浏览器中，某些客户无法进入我的付款页面。 When trying to submit a form I get this error: 尝试提交表单时出现此错误：

An invalid form control with name='' is not focusable.

This is from the JavaScript console. 这来自JavaScript控制台。

I read that the problem could be due to hidden fields having the required attribute. 我读到问题可能是由于隐藏字段具有必填属性。 Now the problem is that we are using .net webforms required field validators, and not the html5 required attribute. 现在的问题是，我们使用的是.net Webforms必需的字段验证器，而不是html5必需的属性。

It seems random who gets this error. 似乎谁得到此错误是随机的。 Is there anyone who knows a solution for this? 有谁知道解决方案吗？

---

#1楼

参考：https://stackoom.com/question/1Uvj6/名称-的无效表单控件不可聚焦

---

#2楼

向表单添加novalidate属性将有助于：

<form name="myform" novalidate>

---

#3楼

In case anyone else has this issue, I experienced the same thing. 万一其他人遇到这个问题，我也会遇到同样的事情。 As discussed in the comments, it was due to the browser attempting to validate hidden fields. 如评论中所讨论的，这是由于浏览器试图验证隐藏字段而引起的。 It was finding empty fields in the form and trying to focus on them, but because they were set to display:none; 它正在查找表单中的空字段并试图将其重点关注，但是因为它们被设置为display:none; , it couldn't. ，它不能。 Hence the error. 因此，错误。

I was able to solve it by using something similar to this: 我可以通过使用类似于以下内容的方法来解决此问题：

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

Also, this is possibly a duplicate of "Invalid form control" only in Google Chrome 此外，这可能仅在Google Chrome中是“无效的表单控件”的重复项

---

#4楼

In your form , You might have hidden input having required attribute: 在您的form ，您可能隐藏了具有required属性的input ：

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

The form can't focus on those elements, you have to remove required from all hidden inputs, or implement a validation function in javascript to handle them if you really require a hidden input. form不能专注于这些元素，如果您确实需要隐藏的输入，则required从所有隐藏的输入中删除required元素，或者在javascript中实现验证功能以处理它们。

---

#5楼

It will show that message if you have code like this: 如果您具有以下代码，它将显示该消息：

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

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

---

#6楼

You may try .removeAttribute("required") for those elements which are hidden at the time of window load. 您可以尝试.removeAttribute("required")那些在窗口加载时隐藏的元素。 as it is quite probable that the element in question is marked hidden due to javascript (tabbed forms) 因为所讨论的元素很可能由于javascript（选项卡式表单）被标记为隐藏

eg 例如

if(document.getElementById('hidden_field_choice_selector_parent_element'.value==true){
    document.getElementById('hidden_field').removeAttribute("required");        
}

This should do the task. 这应该完成任务。

It worked for me... cheers 对我有用...干杯