html5的input的required应用中遇到的难题及处理方式

form递交时掩藏input产生的不正确

难题叙述

在form表单递交的情况下，一些input标识被掩藏，表单认证全过程中会出現An invalid form control with name='' is not focusable 的不正确

尽管我遇到的难题是我的input标识压根沒有required特性，可是在该标识掩藏以前，（我的是应用tab栏切换）我键入了不正确的文件格式，再掩藏，这时候候他实际上是不正确的,会被form表单一样去认证，可是因为它被掩藏，访问器获得不到聚焦点就会出错。

处理方式

掩藏以前将该input的value值设定为空便可.我的input上面沒有应用required特性。

假如input含有display:none和required特性，也会造成该不正确

造成缘故

Chrome期待潜心于必须但仍为空的控制，便于能够弹出信息“请填写此字段”。可是，假如控制在Chrome要想弹出信息的情况下掩藏，即在递交表单时，Chrome没法关心该控制，由于它是掩藏的，因而表单不容易递交。

处理方式以下

1.掩藏时，将required特性删掉

selector.removeAttribute("required")

2.沒有应用required的话，也许是因为button按钮，种类未设定导致。设定<button type="button">

3.form表单不认证,即加上novalidate特性。（并不是最后处理方法）<form novalidate></form>

4.既然是因为应用了display:none导致，一样的visibility: hidden 也会导致难题,那就不应用。根据能够设定css款式opacity: 0;

5.禁用此表单控制。 disabled 这是由于一般假如你掩藏了表单控制，那是由于你不关注它的使用价值。因此这个表单控制名字值对在递交表单时不容易被推送。

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

总结

以上所述是网编给大伙儿详细介绍的h5的input的required应用中遇到的难题及处理方式，期待对大伙儿有一定的协助，假如大伙儿有任何疑惑请给我留言，网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用！