html - password - "Control de formulario inválido" solo en Google Chrome

formulario html ejemplo

Question

El siguiente código funciona bien en Safari, pero en Chrome y Firefox, el formulario no se enviará. 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, deben tener nombres en el momento de la presentación, rellenado por el siguiente JavaScript. La forma 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>

Answer 1

Chrome quiere enfocarse en un control que se requiere pero que todavía está vacío para que aparezca el mensaje "Complete este campo". Sin embargo, si el control está oculto en el momento en que Chrome desea mostrar el mensaje, es decir, en el momento del envío del formulario, Chrome no puede enfocarse en el control porque está oculto, por lo tanto, el formulario no se enviará.

Entonces, para evitar el problema, cuando JavaScript oculta un control, también debemos eliminar el atributo ''requerido'' de ese control.

Answer 2

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 el formulario se envíe a menos que este campo sea obligatorio, debe desactivar el botón de enviar.

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

también puede ocultar el botón (debe estar deshabilitado y oculto porque si está oculto pero no desactivado, el usuario puede enviar el formulario de otra manera, como presionar enter en cualquier otro campo, pero si el botón está desactivado, esto no sucederá).

si desea que el formulario se envíe si el div está oculto, debe desactivar 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

Answer 3

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

En este caso, era un campo type="number" , que es obligatorio. Cuando nunca se ingresó 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 el momento fue crear un valor inicial / predeterminado.

Answer 4

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

Answer 5

Tengo que hacer algo así para arreglar el error, ya que tengo algún 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 todo el campo de entrada oculto para null Chrome intentará validar la entrada.

Answer 6

Tuve el error:

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

Esto sucedía porque no estaba usando correctamente el campo obligatorio, que se activó y deshabilitó al hacer clic en un marcador. La solución era eliminar el atributo required cada vez que el marcador no estaba marcado y marcarlo como obligatorio cuando la casilla de verificación estaba marcada.

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

Answer 7

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

Simplemente agregué una parte adicional del campo de entrada de radio del mismo grupo en el que 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, algo así como un truco, pero lo que todavía no es así.

Answer 8

este error obtiene si agrega formato decimal. acabo de agregar

step="0.1"

Answer 9

intente usar las etiquetas adecuadas para los controles HTML5 Like for Number (integers)

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

para decimales o flotar

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

step = ''Any'' Sin esto no puede enviar su formulario ingresando ningún valor decimal o flotante como 3.5 o 4.6 en el campo de arriba.

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

Answer 10

reemplazar required por required = "required"

Answer 11

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