Un control de formulario no válido con nombre = '' no es enfocable

671

Tengo un problema grave en mi sitio web. En Google Chrome, algunos clientes no pueden acceder a mi página de pago. Cuando intento enviar un formulario, aparece este error:

An invalid form control with name='' is not focusable.

Esto es de la consola de JavaScript.

Leí que el problema podría deberse a que los campos ocultos tienen el atributo requerido. Ahora el problema es que estamos usando validadores de campo requeridos de formularios web .net, y no el atributo requerido html5.

Parece aleatorio quién recibe este error. ¿Hay alguien que sepa una solución para esto?

mp1990
fuente
11
Si cree que podría deberse a campos obligatorios ocultos, ¿tal vez debería verificar si en algunos casos esos campos permanecen en blanco? Por ejemplo, si completa user_id desde la sesión, o algo similar, en ciertos casos, ¿podría quedar en blanco?
dkasipovic
1
Convenido. Abra la consola del desarrollador (F12) en Google Chrome y examine los valores de los campos para ver si los valores de estos campos están en blanco.
The Vanilla Thrilla
Gracias por tu comentario. Sin embargo, ¿no tiene ningún sentido para mí? Tengo un formulario asp.net simple, que utiliza controles de formulario asp.net. Los controles de entrada son generados por el marco.
mp1990
Lo comprobé y hay valores en los campos de entrada. Tengo un campo de entrada oculto que también tiene un valor.
mp1990
3
Creo que sucede cuando el campo es obligatorio pero no es "visible" en términos generales. Se pasó a mí en una forma dividido en varias pestañas del campo que provocó el error está en una ficha que no está activo en el momento de someto me quita atributo necesario de campo e hice la validación específica
TexWiller

Respuestas:

818

Este problema ocurre en Chrome si un campo de formulario falla la validación, pero debido a que el control no válido respectivo no se puede enfocar, el intento del navegador de mostrar el mensaje "Complete este campo" al lado también falla.

Un control de formulario puede no ser enfocable en el momento en que se activa la validación por varias razones. Los dos escenarios descritos a continuación son las causas más importantes:

  • El campo es irrelevante según el contexto actual de la lógica empresarial. En tal escenario, el control respectivo debe eliminarse del DOM o no debe marcarse con el requiredatributo en ese punto.

  • La validación prematura puede ocurrir debido a que un usuario presiona la tecla ENTER en una entrada. O un usuario que hace clic en un botón / control de entrada en el formulario que no ha definido typecorrectamente el atributo del control. Si el atributo de tipo de un botón no está establecido en button, Chrome (o cualquier otro navegador) realiza una validación cada vez que se hace clic en el botón porque submites el valor predeterminado del typeatributo de un botón .

    Para resolver el problema, si usted tiene un botón en su página que hace algo más aparte de presentar o de reposición , siempre se acuerdan de hacer esto: <button type="button">.

Consulte también https://stackoverflow.com/a/7264966/1356062

Igwe Kalu
fuente
2
Este problema puede surgir cuando una página se crea y prueba con un navegador que no admite la validación del cliente o no impide el envío del formulario (consulte Safari). El próximo desarrollador o usuario con un navegador que realmente evita el envío de formularios por errores del lado del cliente (vea Chrome; incluso en elementos de formulario ocultos) se encuentra con el problema de un formulario inaccesible ya que uno no puede enviar el formulario y no recibe ningún mensaje de el navegador o el sitio La prevención de la validación por completo a través de 'novalidate' no es una respuesta correcta, ya que la validación del cliente debe admitir las entradas del usuario. Cambiar el sitio web es la solución.
Graste
44
Gracias por la respuesta detallada. Omitir requiredo agregar novalidatenunca es una buena solución.
fatCop
2
Esta debería ser la respuesta correcta. Si está utilizando la validación del lado del cliente html5, agregar novalidate corrige un problema mientras crea otro. Para mal Chrome quiere validar una entrada que no se muestra (y por lo tanto no debería ser necesaria).
kheit
1
Solo dejando un ejemplo en mi caso, tenía un numbercampo oculto donde el valor predeterminado no era divisible de manera uniforme por el tamaño del paso. Cambiar el tamaño del paso resolvió el problema.
James Scott, el
3
@IgweKalu buena llamada. Me encontré con esta implementación de TinyMCE en un campo de área de texto. TinyMCE oculta el campo de formulario original (que era "obligatorio") y desencadena este error. Solución, quitar el atributo "required" ahora oculto a la forma y se basan en otro método para asegurarse de que se rellena.
John
355

Agregar un novalidateatributo al formulario ayudará:

<form name="myform" novalidate>
usuario2909164
fuente
41
No es un riesgo de seguridad. (Confiar en los controles del lado del cliente es). Es un problema de usabilidad.
Jukka K. Korpela
99
¡Intenté y descubrí que no se requiere " no validar" ! ¡Acabo de dar un nombre a mi formulario y todo funcionó bien!
Sunny Sharma
33
Traté y descubrí que "no validar" es realmente necesario. Solo agregar un nombre de formulario no funciona.
Jeff Tian
13
Agregar novalidate también detiene la validación del lado del cliente, como con la gema Rails Simple Form. Es mejor hacer que los campos del problema no sean obligatorios, según la respuesta de Ankit + el comentario de David Brunow.
acero
99
Descubrí que "Un control de formulario no válido con nombre = '' no es enfocable". también muestra si las entradas están en un<fieldset>
oscargilfc
261

En su form, es posible que haya ocultado inputtener requiredatributo:

  • <input type="hidden" required />
  • <input type="file" required style="display: none;"/>

No formpuede enfocarse en esos elementos, debe eliminarlos requiredde todas las entradas ocultas o implementar una función de validación en javascript para manejarlos si realmente necesita una entrada oculta.

Ankit Sharma
fuente
77
Me di cuenta de que esto también puede suceder con los campos de tipo "correo electrónico" configurados para no mostrar ninguno, el problema causado por Chrome al intentar validar el formato.
David Brunow
3
No necesita tenerlo required. patternsolo puede causar este problema.
Pacerier
3
En mi caso, los campos del formulario no eran type = "hidden", simplemente estaban fuera de la vista, por ejemplo, en un formulario con pestañas.
Josh Mc
Tengo dos formularios, uno con an <input type="hidden" required />y otro con an <input type="text" style="display: none" required />, y el único que muestra el error en Chrome es el display: none, mientras que el que "hidden"se envía está bien.
Pere
Esta es la respuesta correcta. Chrome está intentando validar un campo que se ha ocultado en CSS. Impide que muestre su mensaje de advertencia de validación y le alerta de este hecho.
superluminary
33

En caso de que alguien más tenga este problema, experimenté lo mismo. Como se discutió en los comentarios, se debió a que el navegador intentó validar los campos ocultos. Estaba encontrando campos vacíos en el formulario e intentando enfocarse en ellos, pero debido a que estaban configurados display:none;, no pudo. De ahí el error.

Pude resolverlo usando algo similar a esto:

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

Además, esto es posiblemente un duplicado de "Control de formulario no válido" solo en Google Chrome

Horacio Alderaan
fuente
66
Si se siente inclinado a rechazar esta respuesta, deje un comentario para informarme por qué. Prefiero eliminar la respuesta si contiene información incorrecta que dejarla aquí y engañar a la comunidad.
Horatio Alderaan
1
No rechazaré la votación, pero creo que este código utiliza un enfoque de "enmascaramiento del problema" de fuerza bruta. Ciertamente tiene utilidad cuando se trata de código heredado, pero para proyectos más nuevos, recomendaría analizar su problema un poco más difícil. Esta respuesta también se aplica al uso de "novalidate" en la etiqueta del formulario, pero eso es un poco más visible. Se requiere +1 para discapacitados en lugar de eliminar.
Jonathan DeMarks
1
Para dar un poco de contexto, estaba exactamente en la situación de "lidiar con el código heredado" cuando me encontré con este problema. Estoy totalmente de acuerdo en que es un truco. Mucho mejor diseñar el marcado para que no encuentre esta situación. Sin embargo, con bases de código heredadas y sistemas CMS inflexibles, esto no siempre es posible. El enfoque anterior de deshabilitar en lugar de usar "no validar" fue la mejor manera que pude pensar para resolver el problema.
Horatio Alderaan
2
Estoy de acuerdo con el enfoque de deshabilitar campos ocultos. Al eliminar sus atributos 'obligatorios', se pierde la información en caso de que se muestren nuevamente más tarde. Volver a habilitarlos mantendría esto, sin embargo.
Druckles
1
Me encanta esta solución y creo que funciona bien cuando tienes un formulario con entradas que se muestran u ocultan de forma variable según los valores seleccionados de otras entradas. Esto conserva la configuración requerida y aún permite que se envíe el formulario. Aún mejor, si la validación falla y el usuario hace algo completamente diferente, no se necesitan reinicios adicionales.
Lewsid
17

En mi caso, el problema era input type="radio" requiredestar oculto con:

visibility: hidden;

Este mensaje de error también mostrará si el tipo de entrada requerido radioo checkboxtiene una display: none;propiedad CSS.

Si desea crear entradas de radio / casilla de verificación personalizadas donde deben ocultarse de la interfaz de usuario y aún mantener el requiredatributo, en su lugar debe usar:

opacity: 0; Propiedad CSS

Gus
fuente
mismo problema con la excepción de que estoy usando la biblioteca selectivity.js que oculta el cuadro de selección actual y muestra un cuadro js alternativo con js y css. cuando uso requerido en él arroja este error form-field.js: 8 create: 1 Un control de formulario no válido con name = 'listing_id' no es enfocable. cny sugestion ¿cómo puedo trabajar alrededor?
Inzmam ul Hassan
@InzmamGujjar, como entendí, su complemento js está creando otra entrada de selección con sus propias clases. ¿Tal vez alterando las clases CSS del complemento o seleccionando la entrada creada en name=""lugar de la original?
Gus
13

Ninguna de las respuestas anteriores me funcionó, y no tengo ningún campo oculto con el requiredatributo.

En mi caso, el problema fue causado por tener a <form>y luego a <fieldset>como su primer hijo, que contiene <input>el requiredatributo. Eliminar el <fieldset>resuelto el problema. O puede envolver su formulario con él; Está permitido por HTML5.

Estoy en Windows 7 x64, Chrome versión 43.0.2357.130 m.

Pere
fuente
Tuve el mismo problema, gracias por la pista. Se las arregló para resolverlo con su solución, es extraño.
Ben
Gracias, este también fue el problema en mi caso.
fantasticrice
en mi caso esta pista me ayuda
Anja Ishmukhametova
2
Los juegos de campo también fueron mi problema. En mi caso, la respuesta se encontró aquí: stackoverflow.com/a/30785150/1002047 Parece ser un error de Chrome (ya que el HTML en cuestión se valida con el validador de W3C). Simplemente cambiando mis conjuntos de campos a divs resolvió el problema.
Eric S. Bullington
@ EricS.Bullington gracias por señalar. No sabía de esa respuesta; como ese usuario, lo encontré yo mismo "cortando" partes de mi formulario. Por cierto, no sé sobre el sistema de numeración de versiones de Chrome, pero de 124 a 130 en 4 años no parece un gran paso ...
Pere
9

Otra posibilidad más si recibe el error en una entrada de casilla de verificación. Si sus casillas de verificación usan CSS personalizado que oculta el valor predeterminado y lo reemplaza con algún otro estilo, esto también activará el error no enfocable en Chrome en el error de validación.

Encontré esto en mi hoja de estilo:

input[type="checkbox"] {
    visibility: hidden;
}

Una solución simple fue reemplazarlo con esto:

input[type="checkbox"] {
    opacity: 0;
}
Sam
fuente
Esta también fue la solución que mejor funcionó. Permite que el mensaje de error se muestre realmente cerca de los controles de formulario invisibles.
Rob
8

Puede ser que tenga campos ocultos (mostrar: ninguno) con el atributo requerido .

Compruebe que todos los campos obligatorios sean visibles para el usuario :)

ghuroo
fuente
7

Para mí esto sucede, cuando hay un <select>campo con la opción preseleccionada con el valor de '':

<select name="foo" required="required">
    <option value="" selected="selected">Select something</option>
    <option value="bar">Bar</option>
    <option value="baz">Baz</option>
</select>

Desafortunadamente, es la única solución de navegador cruzado para un marcador de posición ( ¿Cómo hago un marcador de posición para un cuadro 'seleccionar'? ).

El problema surge en Chrome 43.0.2357.124.

piotr_cz
fuente
7

Si tiene algún campo con el atributo requerido que no está visible durante el envío del formulario, se generará este error. Simplemente eliminas el atributo requerido cuando intentas ocultar ese campo. Puede agregar el atributo requerido en caso de que desee volver a mostrar el campo. De esta manera, su validación no se verá comprometida y, al mismo tiempo, no se arrojará el error.

maniempire
fuente
Sugerencia: $("input").attr("required", "true"); o al $("input").prop('required',true);contrario, puede removeel atributo / propiedad . >> Se requiere jQuery add para ingresar campos
fWd82
7

Para el problema de Select2 Jquery

El problema se debe a que la validación HTML5 no puede enfocar un elemento no válido oculto. Me encontré con este problema cuando estaba lidiando con el complemento jQuery Select2.

Solución Puede inyectar un detector de eventos y un evento 'no válido' de cada elemento de un formulario para que pueda manipular justo antes del evento de validación HTML5.

$('form select').each(function(i){
this.addEventListener('invalid', function(e){            
        var _s2Id = 's2id_'+e.target.id; //s2 autosuggest html ul li element id
        var _posS2 = $('#'+_s2Id).position();
        //get the current position of respective select2
        $('#'+_s2Id+' ul').addClass('_invalid'); //add this class with border:1px solid red;
        //this will reposition the hidden select2 just behind the actual select2 autosuggest field with z-index = -1
        $('#'+e.target.id).attr('style','display:block !important;position:absolute;z-index:-1;top:'+(_posS2.top-$('#'+_s2Id).outerHeight()-24)+'px;left:'+(_posS2.left-($('#'+_s2Id).width()/2))+'px;');
        /*
        //Adjust the left and top position accordingly 
        */
        //remove invalid class after 3 seconds
        setTimeout(function(){
            $('#'+_s2Id+' ul').removeClass('_invalid');
        },3000);            
        return true;
}, false);          
});
SudarP
fuente
3

Mostrará ese mensaje si tiene un código como este:

<form>
  <div style="display: none;">
    <input name="test" type="text" required/>
  </div>

  <input type="submit"/>
</form>
Robert
fuente
sé que es lo mismo, solo hago un ejemplo, algunas personas entienden mejor las cosas con códigos: D
Robert
3

Sí. Si un control de formulario oculto ha requerido un campo, entonces muestra este error. Una solución sería deshabilitar este control de formulario . Esto se debe a que, por lo general, si está ocultando un control de formulario, es porque no le preocupa su valor. Por lo tanto, este par de valores de nombre de control de formulario no se enviará al enviar el formulario.

Kartik Shenoy
fuente
1
Gracias por esta idea! Fue útil para mí alternar TODOS los elementos de formulario a veces ocultos, independientemente de si se requieren los individuales o no, por lo que mi lógica es agradable y simple :)
Gabe Kopley
3

Puede probar .removeAttribute("required")los elementos que están ocultos en el momento de la carga de la ventana. ya que es bastante probable que el elemento en cuestión esté marcado como oculto debido a JavaScript (formularios con pestañas)

p.ej

if(document.getElementById('hidden_field_choice_selector_parent_element'.value==true){
    document.getElementById('hidden_field').removeAttribute("required");        
}

Esto debería hacer la tarea.

Funcionó para mí ... saludos

utkarshk
fuente
3

Otra causa posible y que no se cubre en todas las respuestas anteriores cuando tiene un formulario normal con campos obligatorios y envía el formulario y luego lo oculta directamente después del envío (con javascript), sin tiempo para que funcione la funcionalidad de validación.

La funcionalidad de validación intentará centrarse en el campo requerido y mostrará el mensaje de validación de error, pero el campo ya se ha ocultado, por lo que "un control de formulario no válido con nombre = '' no es enfocable". aparece!

Editar:

Para manejar este caso, simplemente agregue la siguiente condición dentro de su controlador de envío

submitHandler() {
    const form = document.body.querySelector('#formId');

    // Fix issue with html5 validation
    if (form.checkValidity && !form.checkValidity()) {
      return;
    }

    // Submit and hide form safely
  }

Editar: Explicación

Suponiendo que está ocultando el formulario al enviarlo, este código garantiza que el formulario / campos no estarán ocultos hasta que el formulario sea válido. Entonces, si un campo no es válido, el navegador puede enfocarse en él sin problemas ya que este campo todavía se muestra.

Mouneer
fuente
3

Hay cosas que todavía me sorprenden ... Tengo una forma con comportamiento dinámico para dos entidades diferentes. Una entidad requiere algunos campos que la otra no. Entonces, mi código JS, dependiendo de la entidad, hace algo como: $ ('# periodo'). RemoveAttr ('required'); $ ("# periodo-container"). hide ();

y cuando el usuario selecciona la otra entidad: $ ("# periodo-container"). show (); $ ('# periodo'). prop ('requerido', verdadero);

Pero a veces, cuando se envía el formulario, aparece el problema: "Un control de formulario no válido con name = periodo '' no se puede enfocar (estoy usando el mismo valor para la identificación y el nombre).

Para solucionar este problema, debe asegurarse de que la entrada donde está configurando o eliminando 'requerido' siempre esté visible.

Entonces, lo que hice es:

$("#periodo-container").show(); //for making sure it is visible
$('#periodo').removeAttr('required'); 
$("#periodo-container").hide(); //then hide

Eso resolvió mi problema ... increíble.

Gustavo Soler
fuente
3

En mi caso..

ng-showestaba siendo utilizado
ng-iffue puesto en su lugar y solucionó mi error.

Chareesa Graham
fuente
Me salvó el día Gracias
Syed Atir Mohiuddin
2

Para uso angular:

ng-required = "boolean"

Esto solo aplicará el atributo 'requerido' html5 si el valor es verdadero.

<input ng-model="myCtrl.item" ng-required="myCtrl.items > 0" />
Nick Taras
fuente
2

Vine aquí para responder que había desencadenado este problema yo mismo en base a NO cerrar la </form>etiqueta Y tener múltiples formularios en la misma página. El primer formulario se extenderá para incluir la validación de búsqueda en entradas de formularios de otros lugares. Debido a que esas formas están ocultas, desencadenaron el error.

así, por ejemplo:

<form method="POST" name='register' action="#handler">


<input type="email" name="email"/>
<input type="text" name="message" />
<input type="date" name="date" />

<form method="POST" name='register' action="#register">
<input type="text" name="userId" />
<input type="password" name="password" />
<input type="password" name="confirm" />

</form>

Disparadores

Un control de formulario no válido con nombre = 'userId' no es enfocable.

Un control de formulario no válido con nombre = 'contraseña' no es enfocable.

Un control de formulario no válido con nombre = 'confirmar' no es enfocable.

Frankenmint
fuente
2

Hay muchas maneras de arreglar esto como

  1. Agregue novalidate a su formulario, pero es totalmente incorrecto ya que eliminará la validación del formulario, lo que conducirá a información incorrecta ingresada por los usuarios.

<form action="...." class="payment-details" method="post" novalidate>

  1. El uso puede eliminar el atributo requerido de los campos obligatorios, lo que también es incorrecto, ya que eliminará la validación del formulario una vez más.

    En lugar de esto:

<input class="form-control" id="id_line1" maxlength="255" name="line1" placeholder="First line of address" type="text" required="required">

   Use this:

<input class="form-control" id="id_line1" maxlength="255" name="line1" placeholder="First line of address" type="text">

  1. El uso puede deshabilitar los campos obligatorios cuando no va a enviar el formulario en lugar de hacer alguna otra opción. Esta es la solución recomendada en mi opinión.

    me gusta:

<input class="form-control" id="id_line1" maxlength="255" name="line1" placeholder="First line of address" type="text" disabled="disabled">

o deshabilitarlo a través del código javascript / jquery depende de su escenario.

Umar Asghar
fuente
2

Encontré el mismo problema cuando uso Angular JS. Fue causado por el uso requerido junto con ng-hide . Cuando hice clic en el botón Enviar mientras este elemento estaba oculto, se produjo el error Un control de formulario no válido con nombre = '' no es enfocable. ¡finalmente!

Por ejemplo, de usar ng-hide junto con required:

<input type="text" ng-hide="for some condition" required something >

Lo resolví reemplazando el requerido con ng-pattern en su lugar.

Por ejemplo de solución:

<input type="text" ng-hide="for some condition" ng-pattern="some thing" >
Khachornchit Songsaen
fuente
1

Para otros usuarios de AngularJS 1.x, este error apareció porque estaba ocultando la visualización de un control de formulario en lugar de eliminarlo del DOM por completo cuando no necesitaba completar el control.

Lo arreglé usando en ng-iflugar de ng-show/ ng-hideen el div que contiene el control de formulario que requiere validación.

Espero que esto les ayude a otros usuarios de casos extremos.

JD Mallen
fuente
1

Permítanme exponer mi caso, ya que era diferente de todas las soluciones anteriores. Tenía una etiqueta html que no se cerró correctamente. el elemento no estaba required, pero estaba incrustado en un hiddendiv

El problema en mi caso fue con el type="datetime-local", que fue, por alguna razón, validado en el envío del formulario.

cambié esto

<input type="datetime-local" />

en eso

<input type="text" />
SoliQuiD
fuente
1

Quería responder aquí porque NINGUNA de estas respuestas, o cualquier otro resultado de Google resolvió el problema por mí.

Para mí no tenía nada que ver con conjuntos de campos o entradas ocultas.

Descubrí que si usaba max="5"(p. Ej.) Produciría este error. Si usé maxlength="5" ... no hay error.

Pude reproducir el error y borrar el error varias veces.

Todavía no sé por qué usar ese código produce el error, en la medida en que esto indica que debería ser válido, incluso sin un "mínimo", creo.

Kevin Marmet
fuente
La mía se resolvió de manera similar, pero la configuración sí min='-9999999999.99' max='9999999999.99'.
Ricardo Green el
0

Alternativamente, otra respuesta infalible es usar el atributo HTML5 Placeholder, entonces no habrá necesidad de usar ninguna validación js.

<input id="elemID" name="elemName" placeholder="Some Placeholder Text" type="hidden" required="required">

Chrome no podrá encontrar elementos vacíos, ocultos y necesarios para enfocarse. Solución simple.

Espero que ayude. Estoy totalmente ordenado con esta solución.

utkarshk
fuente
0

Vine aquí con el mismo problema. Para mí (inyectar elementos ocultos según sea necesario, es decir, educación en una aplicación de trabajo) tenía las banderas requeridas.

Me di cuenta de que el validador disparaba sobre el inyectado más rápido de lo que el documento estaba listo, por lo que se quejó.

Mi etiqueta ng-required original estaba usando la etiqueta de visibilidad (vm.flags.hasHighSchool).

Lo resolví creando un indicador dedicado para configurar ng-required = "vm.flags.highSchoolRequired == true" requerido

Agregué una devolución de llamada de 10 ms al configurar ese indicador y el problema se resolvió.

 vm.hasHighSchool = function (attended) {

        vm.flags.hasHighSchool = attended;
        applicationSvc.hasHighSchool(attended, vm.application);
        setTimeout(function () {
            vm.flags.highSchoolRequired = true;;
        }, 10);
    }

HTML:

<input type="text" name="vm.application.highSchool.name" data-ng-model="vm.application.highSchool.name" class="form-control" placeholder="Name *" ng-required="vm.flags.highSchoolRequired == true" /></div>
James Fleming
fuente
Su solución, de hecho, es muy, muy arriesgada. Cualquier persona con CPU lenta seguirá recibiendo el mismo error. Es (o será) la condición típica de la carrera. Probablemente los teléfonos inteligentes viejos podrían verse afectados. Entonces, tenga cuidado con esta solución.
Drachenfels
0

Asegúrese de que todos los controles en su formulario con el atributo requerido también tengan establecido el atributo de nombre

Adam Diament
fuente
0

Este error me ocurrió porque estaba enviando un formulario con los campos obligatorios que no se completaron.

El error se produjo porque el navegador estaba tratando de enfocarse en los campos requeridos para advertir al usuario que los campos eran obligatorios pero esos campos requeridos estaban ocultos en una pantalla sin div, por lo que el navegador no podía enfocarse en ellos. Estaba enviando desde una pestaña visible y los campos requeridos estaban en una pestaña oculta, de ahí el error.

Para solucionarlo, asegúrese de controlar que los campos obligatorios estén llenos.

eloone
fuente
0

Es porque hay una entrada oculta con el atributo requerido en el formulario.

En mi caso, tenía un cuadro de selección y está oculto por jquery tokenizer usando estilo en línea. Si no selecciono ningún token, el navegador arroja el error anterior al enviar el formulario.

Entonces, lo arreglé usando la siguiente técnica css:

  select.download_tag{
     display: block !important;//because otherwise, its throwing error An invalid form control with name='download_tag[0][]' is not focusable.
    //So, instead set opacity
    opacity: 0;
    height: 0px;

 }
sudip
fuente
0

Recibí el mismo error al clonar un elemento HTML para usarlo en un formulario.

(Tengo un formulario parcialmente completo, que tiene una plantilla inyectada, y luego la plantilla se modifica)

El error hacía referencia al campo original y no a la versión clonada.

No pude encontrar ningún método que obligue al formulario a reevaluarse a sí mismo (con la esperanza de que elimine cualquier referencia a los campos antiguos que ahora no existen) antes de ejecutar la validación.

Para solucionar este problema, eliminé el atributo requerido del elemento original y lo agregué dinámicamente al campo clonado antes de inyectarlo en el formulario. El formulario ahora valida los campos clonados y modificados correctamente.

AlastairDewar
fuente