Problems and solutions encountered in using required input of html5

Error in hiding input when submitting form

When the form is submitted, some input tags are hidden, and the error An invalid form control with name='' is not focusable will appear during the form verification process.

Although the problem I encountered is that my input tag has no required attribute at all, but before the tag was hidden (I used the tab bar to switch) I entered the wrong format and then hidden it, at this time it was actually wrong. It will also be verified by the form, but because it is hidden, the browser will report an error if it cannot get the focus.

Just set the value of the input to empty before hiding it. My input does not use the required attribute.

This error will also occur if the input contains display:none and required attributes.

Chrome wants to focus on the controls that are needed but are still empty so that it can pop up the message Please fill in this field. However, if the control is hidden when Chrome wants to pop up the message, i.e. when the form is submitted, Chrome cannot focus on the control because it is hidden, so the form does not submit.

1. When hiding, delete the required attribute

 selector.removeAttribute(required)

2. If required is not used, it may be caused by the button type not being set. Set <button type=button>

3. The form is not verified, that is, the novalidate attribute is added. (Not the final solution ）<form novalidate></form>

4. Since it is caused by the use of display:none, the same visibility: hidden will also cause problems, so don't use it. You can set the css style opacity: 0;

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

The above are the problems and solutions encountered in the use of required input of h5 introduced by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for your support of the VeVb martial arts website!