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

2020-10-10 10:02 jianzhan

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应用中遇到的难题及处理方式,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!