Un control de formulario no válido con name=' no se puede enfocar

Agregar un atributo novalidate al formulario ayudará:

<form name="myform" novalidate>

En su formulario, es posible que haya ocultado la entrada con el atributo requerido.

<input type="hidden" required />

Por lo tanto, form no puede enfocarse en ese elemento, debe eliminar required de todas las entradas ocultas.

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 y tratando de enfocarse en ellos, pero debido a que estaban configurados a 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 que el input type="radio" required estaba oculto con:

visibility: hidden;

Este mensaje de error también mostrará si el tipo de entrada requerido radio o checkbox tiene una propiedad CSS display: none;.

Si desea crear entradas de radio/casilla de verificación personalizadas donde deben estar ocultas de la interfaz de usuario y aún así mantener el atributo required, debe usar:

opacity: 0; Propiedad CSS

Ninguna de las respuestas anteriores funcionó para mí, y no tengo ningún campo oculto con el atributo required.

En mi caso, el problema fue causado por tener un <form> y luego un <fieldset> como su primer hijo, que contiene el <input> con el atributo required. Eliminar el <fieldset> solucionó 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.

Para mí esto sucede, cuando hay un campo <select> con 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 para un marcador de posición ( ¿Cómo puedo hacer un marcador de posición para un cuadro de 'seleccionar'?).

El problema surge en Chrome 43.0.2357.124.

Si tiene algún campo con el atributo requerido que no sea visible durante el envío del formulario, se lanzará este error. Simplemente elimine el atributo requerido cuando intente ocultar ese campo. Puede agregar el atributo requerido en caso de que desee mostrar el campo de nuevo. De esta manera, su validación no será comprometida y al mismo tiempo, el error no se produce.

Puede ser que tenga campos ocultos (display: none) con el atributo required.

Por favor, compruebe que todos los campos obligatorios son visibles para el usuario:)

Otra posibilidad si está recibiendo el error en una entrada de casilla de verificación. Si las 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;
}

Para el problema 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 tratando con jQuery Select2 plugin.

Solución Puede inyectar un evento de escucha de eventos y un evento 'invá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);          
});

Sí.. Si un control de formulario oculto tiene un campo requerido, muestra este error. Una solución sería desactivar este control de forma. 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 valor de nombre de control de formulario no se enviará al enviar el formulario.

Otra causa posible y no cubierta 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 dar tiempo para que funcione la funcionalidad de validación.

La funcionalidad de validación intentará enfocarse 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 name=" no se puede enfocar." 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 en el envío, este código garantiza que el formulario/campos no se ocultarán hasta que el formulario sea válido. Por lo tanto, si un campo no es válido, el navegador puede centrarse en él sin problemas, ya que este campo todavía se muestra.

Para uso angular:

Ng-required = "boolean"

Esto solo aplicará el atributo 'required' de html5 si el valor es true.

<input ng-model="myCtrl.item" ng-required="myCtrl.items > 0" />

Puede probar .removeAttribute("required") para aquellos 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 (formas tabuladas)

Por ejemplo

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

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>

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

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>

Desencadenantes

Un control de formulario no válido con name='userId' no es focalizable.

Un control de formulario no válido con name = 'password' no es enfocable.

Un control de formulario no válido con name='confirm' 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 que conducirá a la información incorrecta ingresada por los usuarios.

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

1. Use puede eliminar el atributo required de los campos required, 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. Utilice la lata deshabilite los campos obligatorios cuando no vaya a enviar el formulario en lugar de hacer alguna otra opción. Esta es la solución recomendada en mi opinión.

   Como:

<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 de código javascript / jquery depende de su escenario.

Encontré el mismo problema al usar Angular JS. Fue causado por usar required 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 name=" no se puede enfocar. 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" >

Alternativamente, otra respuesta infalible es usar el atributo de marcador de posición HTML5, 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 será capaz de encontrar cualquier vacío, elementos ocultos y necesarios para centrarse en. Solución Simple.

Espero que eso ayude. Estoy totalmente resuelto 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.

Lo que me di cuenta fue que el validador estaba disparando 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.bandera.hasHighSchool).

Resolví creando un indicador dedicado para establecer requerido ng-required = " vm.bandera.highSchoolRequired == verdadero "

Agregué una devolución de llamada de 10 ms al configurar esa bandera 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 el atributo name establecido

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

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

Para arreglar, asegúrese de controlar la los campos obligatorios están rellenados.

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 en él, y luego la plantilla se modifica)

El error se refería al campo original, y no a la versión clonada.

No pude encontrar ningún método que obligara a la forma a reevaluarse a sí misma (con la esperanza de que se deshiciera de cualquier referencia a los campos antiguos que ahora no existen) antes de ejecutar el validación.

Para evitar 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 correctamente los campos clonados y modificados.

Mi escenario espero que no se pierda en esta larga semilla de respuestas fue algo realmente extraño.

Tengo elementos div que se actualizan dinámicamente a través de un cuadro de diálogo que se llama en ellos para cargar y obtener acción en.

En resumen, los id de div tenían

<div id="name${instance.username}"/>

Tenía un usuario: and y por alguna razón la codificación hizo algunas cosas extrañas en el mundo de java script. Recibí este mensaje de error para un formulario que funciona en otros lugares.

Lo redujo a esto y una nueva prueba de uso números numéricos en lugar de i.e id aparece para solucionar el problema.

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

Y cuando el usuario selecciona la otra entidad: $("#periodo-container").Mostrar(); $('#periodo').prop ('required', true);

Pero a veces, cuando se envía el formulario, el problema apppears: "Un control de formulario no válido con nombre=periodo" no es enfocable (estoy usando el mismo valor para el id y el nombre).

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

Entonces, lo que hice fue:

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

Eso ha resuelto mi problema... increible.

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

Arreglé esto usando ng-if en lugar de ng-show/ng-hide en el div que contiene el control de formulario que requiere validación.

Espero que esto le ayude a otros usuarios de casos edge.

En mi caso..

ng-show estaba siendo usado.
ng-if fue puesto en su lugar y solucionó mi error.

1> Adding a novalidate attribute to the form will help:
it will remove the  validation 


<form name="userForm" id="userForm" novalidate>

2> it can be issue of id or name value , it was already using somewhere 
change the value of id   and name 
2nd point help to fix the error