"Control de formulario no válido" solo en Google Chrome

El siguiente código funciona bien en Safari, pero en Chrome y Firefox el formulario no se envía. La consola de Chrome registra el error An invalid form control with name='' is not focusable. ¿Algunas ideas?

Tenga en cuenta que, si bien los controles a continuación no tienen nombres, deberían tener nombres en el momento del envío, llenados por el Javascript a continuación. El formulario funciona en Safari.

<form method="POST" action="/add/bundle"> 
<p> 
    <input type="text" name="singular" placeholder="Singular Name" required> 
    <input type="text" name="plural" placeholder="Plural Name" required> 
</p> 
<h4>Asset Fields</h4> 
<div class="template-view" id="template_row" style="display:none"> 
    <input type="text" data-keyname="name" placeholder="Field Name" required> 
    <input type="text" data-keyname="hint" placeholder="Hint"> 
    <select data-keyname="fieldtype" required> 
        <option value="">Field Type...</option> 
        <option value="Email">Email</option> 
        <option value="Password">Password</option> 
        <option value="Text">Text</option> 
    </select>    
    <input type="checkbox" data-keyname="required" value="true"> Required
    <input type="checkbox" data-keyname="search" value="true"> Searchable
    <input type="checkbox" data-keyname="readonly" value="true"> ReadOnly
    <input type="checkbox" data-keyname="autocomplete" value="true"> AutoComplete
    <input type="radio" data-keyname="label" value="label" name="label"> Label
    <input type="radio" data-keyname="unique" value="unique" name="unique"> Unique
    <button class="add" type="button">+</button> 
    <button class="remove" type="button">-</button> 
</div> 

<div id="target_list"></div> 
    <p><input type="submit" name="form.submitted" value="Submit" autofocus></p> 
</form>

<script> 
function addDiv()
{
    var pCount = $('.template-view', '#target_list').length;
    var pClone = $('#template_row').clone();
    $('select, input, textarea', pClone).each(function(idx, el){
        $el = $(this);
        if ((el).type == 'radio'){
            $el.attr('value', pCount + '_' + $el.data('keyname'));
        }
        else {
            $el.attr('name', pCount + '_' + $el.data('keyname'));
        };
    });
    $('#target_list').append(pClone);
    pClone.show();
}

function removeDiv(elem){
    var pCount = $('.template-view', '#target_list').length;
    if (pCount != 1)
    {
        $(elem).closest('.template-view').remove();
    }
};

$('.add').live('click', function(){
    addDiv();
});

$('.remove').live('click', function(){
    removeDiv(this);
});

$(document).ready(addDiv);

</script>

Chrome quiere centrarse en un control que es obligatorio pero que aún está vacío para que pueda aparecer el mensaje "Complete este campo". Sin embargo, si el control está oculto en el momento en que Chrome quiere que aparezca el mensaje, es decir, en el momento de enviar el formulario, Chrome no puede enfocarse 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.

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>

La solución a este problema dependerá de cómo debería funcionar el sitio.

por ejemplo, si no desea que se envíe el formulario a menos que este campo sea obligatorio, debe desactivar el botón de envío

por lo que el código js para mostrar el div también debería habilitar el botón enviar

también puede ocultar el botón (debe estar deshabilitado y oculto porque si está oculto pero no deshabilitado, el usuario puede enviar el formulario con otras formas, como presionar enteren cualquier otro campo, pero si el botón está deshabilitado, esto no sucederá

si desea que el formulario se envíe si el div está oculto, debe deshabilitar cualquier entrada requerida dentro de él y habilitar las entradas mientras muestra el div

si alguien necesita los códigos para hacerlo, debe decirme exactamente lo que necesita

Si no le importa la validación de HTML5 (tal vez esté validando en JS o en el servidor), podría intentar agregar "novalidate" al formulario o los elementos de entrada.

intente usar etiquetas adecuadas para controles HTML5 Como para Número (enteros)

<input type='number' min='0' pattern ='[0-9]*' step='1'/>

para decimales o flotante

 <input type='number' min='0' step='Any'/>

step = 'Any' Sin esto, no puede enviar su formulario ingresando un valor decimal o flotante como 3.5 o 4.6 en el campo anterior.

Intente arreglar el patrón, escriba los controles HTML5 para solucionar este problema.

Recibí este error y determiné que en realidad estaba en un campo que no estaba oculto.

En este caso, era un type="number"campo, eso es obligatorio. Cuando no se ha ingresado ningún valor en este campo, el mensaje de error se muestra en la consola y el formulario no se envía. Ingresar un valor y luego eliminarlo significa que el error de validación se muestra como se esperaba.

Creo que esto es un error en Chrome: mi solución por ahora era llegar a un valor inicial / predeterminado.

Tuve el error:

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

Esto sucedía porque no estaba usando el campo requerido correctamente, que se habilitaba y deshabilitaba al hacer clic en un checkbok. La solución fue eliminar el requiredatributo siempre que el checkbok no estuviera marcado y marcarlo como requerido cuando se marcó la casilla de verificación.

var telefono = document.getElementById("telefono");  
telefono.removeAttribute("required");

Tengo que hacer algo como esto para corregir el error, ya que tengo algunos type="number"con min="0.00000001":

HTML:

<input type="number" min="0.00000001" step="0.00000001" name="price" value="[%price%]" />

JS:

$('input[type="submit"]').click(function(e) {
    //prevent chrome bug
    $("input:hidden").val(null);
});

Si no configuro todos los campos de entrada ocultos en nullChrome, intentaré validar la entrada.

Ninguna validación hará el trabajo.

<form action="whatever" method="post" novalidate>

Tuve este problema cuando tenía class = "hidden" en los campos de entrada porque estaba usando botones en lugar de balas de radio, y cambiando el estado "activo" a través de JS ..

Simplemente agregué un campo de entrada de radio adicional que forma parte del mismo grupo donde quería que apareciera el mensaje:

<input type="radio" id="thenorm" name="ppoption" value=""  required style="opacity:0"/>

las otras 2 viñetas activas son invisibles, esta no lo es y esto desencadena el mensaje de validación y no hay errores de consola; es un truco, pero lo que no es en estos días.

este error se obtiene si se agrega formato decimal. solo agrego

step="0.1"

Recibí este mensaje de error cuando ingresé un número (999999) que estaba fuera del rango que había establecido para el formulario.

<input type="number" ng-model="clipInMovieModel" id="clipInMovie" min="1" max="10000">

$("...").attr("required"); and $("...").removeAttr("required"); 

no funcionó para mí hasta que puse todo mi código jQuery entre eso:

$(document).ready(function() {
    //jQuery code goes here
});

reemplazar requiredpor required = "required"