Problemas y soluciones encontrados al usar la entrada requerida de html5

Error al ocultar la entrada al enviar el formulario

Cuando se envía el formulario, algunas etiquetas de entrada están ocultas y el error An invalid form control with name='' is not focusable aparecerá durante el proceso de verificación del formulario.

Aunque el problema que encontré es que mi etiqueta de entrada no tiene ningún atributo requerido, pero antes de ocultar la etiqueta (usé la barra de pestañas para cambiar), ingresé el formato incorrecto y luego lo oculté, en este momento en realidad estaba mal. También será verificado por el formulario, pero debido a que está oculto, el navegador informará un error si no puede enfocarse.

Simplemente establezca el valor de la entrada en vacío antes de ocultarla. Mi entrada no utiliza el atributo requerido.

Este error también ocurrirá si la entrada contiene display:none y atributos requeridos.

Chrome quiere centrarse en los controles necesarios pero que aún están vacíos para que pueda mostrar el mensaje Por favor, complete este campo. Sin embargo, si el control está oculto cuando Chrome quiere mostrar el mensaje, es decir, cuando se envía el formulario, Chrome no puede centrarse en el control porque está oculto, por lo que el formulario no se envía.

1. Al ocultar, elimine el atributo requerido

 selector.removeAttribute(obligatorio)

2. Si no se utiliza lo requerido, puede deberse a que el tipo de botón no está configurado. Establecer <button type=button>

3. No se verifica el formulario, es decir, se agrega el atributo novalidate. (No es la solución final ）<form novalidate></form>

4. Dado que es causado por el uso de display:none, la misma visibilidad: oculta también causará problemas, así que no lo use. Puede configurar la opacidad del estilo CSS: 0;

5. Deshabilite este control de formulario. deshabilitado Esto se debe a que generalmente si ocultas un control de formulario es porque no te importa su valor. Por lo tanto, este par de valor de nombre de control de formulario no se enviará cuando se envíe el formulario.

 $(body).on(submit, .myForm, function(evt) {// Deshabilitar cosas que no queremos validar.$([input:hidden, textarea:hidden, select:hidden]).attr(disabled , true);// Si la validación HTML5 está disponible, déjela ejecutar. De lo contrario, evite default.if (this.el.checkValidity && !this.el.checkValidity()) { // Vuelva a habilitar las cosas que previamente deshabilitamos $([input:hidden, textarea:hidden, select:hidden]).attr(disabled, false); anteriormente lo deshabilitamos.$([input:hidden, textarea:hidden, select:hidden]).attr(disabled, false);// Cualquier otro elemento de procesamiento de formularios va aquí.});

Los anteriores son los problemas y soluciones encontrados en el uso de la entrada requerida de h5 presentados por el editor. Espero que le sean útiles. Si tiene alguna pregunta, déjeme un mensaje y el editor le responderá a tiempo. . ¡También me gustaría agradecer a todos por su apoyo al sitio web de artes marciales VeVb!