“Controle de formulário inválido” apenas no Google Chrome

O código abaixo funciona bem no Safari, mas no Chrome e no Firefox o formulário não será enviado. O console do Chrome registra o erro An invalid form control with name='' is not focusable. Alguma ideia?

Observe que, embora os controles abaixo não tenham nomes, eles devem ter nomes no momento do envio, preenchidos pelo Javascript abaixo. O formulário FUNCIONA no 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>

O Chrome quer se concentrar em um controle que é obrigatório, mas ainda vazio, para que possa exibir a mensagem 'Por favor, preencha este campo'. No entanto, se o controle estiver oculto no ponto em que o Chrome deseja exibir a mensagem, ou seja, no momento do envio do formulário, o Chrome não pode focar no controle porque ele está oculto, portanto, o formulário não será enviado.

Portanto, para contornar o problema, quando um controle está oculto por javascript, também devemos remover o atributo 'required' desse controle.

Ele mostrará essa mensagem se você tiver um código como este:

<form>
  <div style="display: none;">
    <input name="test" type="text" required/>
  </div>

  <input type="submit"/>
</form>

solução para este problema vai depender de como o site deve funcionar

por exemplo, se você não quiser que o formulário seja enviado a menos que este campo seja obrigatório, você deve desativar o botão de envio

então o código js para mostrar o div deve habilitar o botão de envio também

vocêpoderáocultar o botão também (deve estar desactivado e escondido porque se estiver oculto mas não desactivado o utilizador pode enviar o formulário com outras formas como premir enterem qualquer outro campo mas se o botão estiver desactivado isto não acontecerá

se você quiser que o formulário seja enviado se o div estiver oculto você deve desabilitar qualquer entrada necessária dentro dele e habilitar as entradas enquanto você mostra o div

se alguém precisar dos códigos para fazer isso, você deve me dizer exatamente o que você precisa

Se você não se importa com a validação de HTML5 (talvez você esteja validando em JS ou no servidor), você pode tentar adicionar "novalidate" ao formulário ou aos elementos de entrada.

tente usar tags adequadas para controles HTML5 como para número (inteiros)

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

para decimais ou flutuante

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

step = 'Qualquer' Sem isso, você não pode enviar seu formulário inserindo qualquer valor decimal ou flutuante como 3,5 ou 4,6 no campo acima.

Tente corrigir o padrão, digite para controles HTML5 para corrigir esse problema.

Eu estava recebendo esse erro e determinei que, na verdade, ele estava em um campo que não estava oculto.

Neste caso, foi um type="number" campo obrigatório. Quando nenhum valor foi inserido neste campo, a mensagem de erro é exibida no console e o formulário não é enviado. Inserir um valor e removê-lo significa que o erro de validação é mostrado conforme o esperado.

Eu acredito que este é um bug no Chrome: minha solução por enquanto era criar um valor inicial / padrão.

Eu tive o erro:

Um controle de formulário inválido com name = 'telefono' não pode ser focalizado.

Isso estava acontecendo porque eu não estava usando o campo obrigatório corretamente, que habilitava e desabilitava ao clicar em um checkbok. A solução foi remover o requiredatributo sempre que o checkbok não estava marcado e marcá-lo como obrigatório quando a caixa de seleção foi marcada.

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

Tenho que fazer algo assim para corrigir o bug, pois tenho alguns type="number"com 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);
});

Se eu não definir todos os campos de entrada ocultos para nullcromo, ainda tentarei validar a entrada.

Nenhuma validação fará o trabalho.

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

Tive este problema quando tinha classe = "escondido" nos campos de entrada porque estava usando botões em vez de marcadores de rádio - e alterando o estado "ativo" via JS ..

Eu simplesmente adicionei um campo de entrada de rádio extra do mesmo grupo onde eu queria que a mensagem aparecesse:

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

os outros 2 marcadores ativos são invisíveis, este não é e isso dispara a mensagem de validação e nenhum erro de console - um pouco de hack, mas o que não é hoje em dia ..

este erro obtém se adicionar formato decimal. eu apenas adiciono

step="0.1"

Recebi esta mensagem de erro ao inserir um número (999999) que estava fora do intervalo que defini para o formulário.

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

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

não funcionou para mim até que coloquei todo o meu código jQuery entre isso:

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

substitua requiredpor obrigatório = "obrigatório"