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

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?

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

Agregar un novalidateatributo al formulario ayudará:

<form name="myform" novalidate>

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.

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

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

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.

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;
}

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

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

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.

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.

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

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>

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.

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

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.

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.

En mi caso..

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

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" />

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.

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>

2. 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">

3. 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.

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" >

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.

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" />

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.

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.

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>

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

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.

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;

 }

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.