que - formularios html ejemplos

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

Question

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

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

Esto es desde la consola de JavaScript.

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

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

Answer 1

Agregar un atributo novalidate al formulario ayudará:

<form name="myform" novalidate>

Answer 2

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 podrá encontrar ningún elemento vacío, oculto y necesario para enfocar. Solución simple.

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

Answer 3

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

Answer 4

En caso de que alguien más tenga este problema, experimenté lo mismo. Como se comentó en los comentarios, se debió a que el navegador intentó validar los campos ocultos. Estaba encontrando campos vacíos en el formulario e intentando concentrarse en ellos, pero porque estaban configurados para 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

Answer 5

En mi caso, el problema fue que el input type="radio" required estar oculto con:

visibility: hidden;

Este mensaje de error también mostrará si la radio o la checkbox tipo de entrada requerida tiene una display: none; Propiedad CSS.

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

opacity: 0; Propiedad CSS

Answer 6

En mi caso..

ng-show estaba siendo utilizado.
ng-if fue puesto en su lugar y solucionado mi error.

Answer 7

En su formulario, puede tener una entrada oculta que tiene un atributo requerido.

<input type="hidden" required />

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

Answer 8

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, ocurrió el error. Un control de formulario no válido con nombre = '''' no se puede enfocar. ¡finalmente!

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

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

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

Por ejemplo de solución:

<input type="text" ng-hide="for some condition" ng-pattern="some thing" >

Answer 9

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

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

Así que, lo arreglé usando la siguiente técnica de 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;

 }

Answer 10

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

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 enfocarlos. Estaba enviando desde una pestaña visible y los campos requeridos estaban en una pestaña oculta, de ahí el error.

Para corregirlo, asegúrese de controlar que los campos requeridos estén rellenos.

Answer 11

Hay cosas que aún 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 (''required'', true);

Pero a veces, cuando se envía el formulario, el problema aparece: "Un control de formulario no válido con nombre = período '''' 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 es:

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

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

Answer 12

Hay muchas maneras de solucionar esto como

1. Agregue novalidate a su formulario, pero es totalmente incorrecto, ya que eliminará la validación de formularios, lo que conducirá a la 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 de formularios 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 requeridos 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 deshabilítelo a través de código javascript / jquery depende de su escenario.

Answer 13

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 cargarse y actuar.

En resumen los div ids tenían

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

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

Reducido a esto y una nueva prueba de utilizar números numéricos en su lugar, es decir, id parece solucionar el problema.

Answer 14

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>

Answer 15

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, versión de Chrome 43.0.2357.130 m.

Answer 16

No es suficiente decir

Agregar un atributo novalidate al formulario ayudará

No explica el problema, y ​​es posible que el OP no haya entendido por qué ayudaría, o si realmente es útil.

Here una respuesta que realmente explica el caso, comprender el problema debería permitirle llegar a una solución que sea adecuada para su desarrollo:

Chrome quiere centrarse en un control que se requiere pero aún está vacío para que pueda aparecer el mensaje "Por favor, complete este campo". Sin embargo, si el control está oculto en el momento en que Chrome quiere mostrar el mensaje, es decir, en el momento del envío del formulario, Chrome no puede concentrarse en el control porque está oculto, por lo tanto, el formulario no se enviará.

Entonces, para solucionar el problema, cuando un control está oculto por javascript, también debemos eliminar el atributo ''requerido'' de ese control.

Para poner el aviso en buen uso, considere esto: no oculte un campo cuando falla la validación . Pero esa no es una regla estricta, ni es una regla en absoluto. Como mencioné en mi comentario a continuación, parafraseo

En algunos casos, el problema no es un problema en absoluto y no causa la pérdida de funcionalidad en una aplicación. Entonces el error tal vez ignorado.

ACTUALIZACIÓN: 21 de agosto de 2015

El error en cuestión también puede surgir debido a una validación prematura. La validación prematura puede ocurrir cuando tiene una entrada de <button> sin un atributo de tipo de conjunto. Sin el atributo de tipo de un botón configurado en botón, Chrome (o cualquier otro navegador, para ese propósito) realiza una validación cada vez que se hace clic en el botón porque enviar es el tipo predeterminado de botones. Para resolver el problema, si tiene un botón en su página que hace otra cosa que no sea enviar o restablecer , recuerde siempre hacer esto: <button type="button">

Answer 17

Otra causa posible y no está cubierta en todas las respuestas anteriores cuando tiene un formulario normal con los campos obligatorios y lo envía, luego lo oculta directamente después del envío (con javascript) sin dar tiempo a 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 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 en el envío, este código garantiza que los formularios / 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 concentrarse en él sin problemas, ya que este campo aún se muestra.

Answer 18

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

Encontré esto en mi hoja de estilo:

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

Arreglo simple fue reemplazarlo con esto:

input[type="checkbox"] {
    opacity: 0;
}

Answer 19

Para mí esto sucede, cuando hay un campo <select> con una opción preseleccionada con un 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 de ''selección''? ).

El problema aparece en Chrome 43.0.2357.124.

Answer 20

Para otros usuarios de AngularJS 1.x, este error apareció porque estaba ocultando un control de formulario para que no se eliminara del DOM cuando no necesitaba que se completara el control.

Arreglé esto usando ng-if 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 de borde.

Answer 21

Para uso angular:

ng-required = "booleano"

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

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

Answer 22

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

Funciono para mi ... salud

Answer 23

Puede ser que haya ocultado (mostrar: ninguno) campos con el atributo requerido .

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

Answer 24

Recibí el mismo error al clonar un elemento HTML para usar 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 (con la esperanza de eliminar 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.

Answer 25

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 generalmente si está ocultando un control de formulario es porque no está preocupado por su valor. Por lo tanto, este par de valores de nombre de control de formulario no se enviará al enviar el formulario.

Answer 26

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

Answer 27

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 en el inyectado más rápido de lo que estaba listo el documento, por lo que se quejó.

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

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

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

 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>

Answer 28

Vine aquí para responder que yo mismo desencadené este problema por NO cerrar la etiqueta </form> Y por tener varios formularios en la misma página. La primera forma se extenderá para incluir la validación de búsqueda en las entradas de formularios de otros lugares. Debido a que estas formas están ocultas, provocaron 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>

Gatillos

Un control de formulario no válido con nombre = ''userId'' no se puede enfocar.

Un control de formulario no válido con nombre = ''contraseña'' no se puede enfocar.

Un control de formulario no válido con el nombre = ''confirmar'' no se puede enfocar.

Answer 29

Para Select2 Jquery problema

El problema se debe a que la validación de HTML5 no puede enfocar un elemento inválido oculto. Me encontré con este problema cuando estaba tratando 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 manipularlo 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);          
});

Answer 30

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