Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to solve the error report in the use of input in html5". The content in the article is simple and clear, and it is easy to learn and understand. below, please follow the editor's train of thought to slowly deepen, to study and learn "how to solve the error report in the use of input in html5"!

Problem description

When the form form is submitted, some input tags are hidden, and An invalid form control with name='' is not focusable errors occur during form validation.

Although the problem I encountered is that my input tag does not have a required attribute at all, but before the tag is hidden, (I use the tab bar to switch) I entered the wrong format, and then hide it, it is actually wrong and will be verified by the form form, but because it is hidden, the browser will report an error if it does not get focus.

Solution method

Set the value of the input to empty before hiding. I don't use the required attribute on my input.

This error also occurs if input contains display:none and required attributes

Cause

Chrome wants to focus on the controls that are needed but still empty so that the message "Please fill in this field" pops up. However, if the control is hidden when Chrome wants a pop-up message, that is, when the form is submitted, Chrome cannot follow the control because it is hidden, so the form will not be submitted.

The solution is as follows

1. When hidden, delete the required property

Selector.removeAttribute ("required")

two。 If you do not use required, it may be due to the button button, the type is not set. Set up

The 3.form form does not validate, that is, the novalidate attribute is added. (not the final solution)

4. Since it's due to the use of display:none, the same visibility: hidden can cause problems, so don't use it. You can set the css style opacity: 0 by

5. Disable this form control. Disabled this is because usually if you hide a form control, it's because you don't care about its value. So the form control name-value pair will not be sent when the form is submitted.

$("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.}) Thank you for your reading, the above is the content of "how to solve the error report of the use of input in html5". After the study of this article, I believe you have a deeper understanding of how to solve this problem in the use of required of input in html5, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.