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

106

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>
MFB
fonte
Somente controles bem-sucedidos serão enviados. Para ter sucesso, um controle deve ter um nome. Existem outros requisitos também (ver link).
RobG
Os botões de opção têm nomes. Todo o resto recebe um nome por meio do JavaScript.
MFB de

Respostas:

247

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.

MFB
fonte
9
Ah, isso é péssimo. Acho que faz sentido, o navegador não pode adivinhar como deseja que sua interface lide com as mensagens de erro de validação se o campo estiver oculto (talvez um formulário com guias ...).
Wesley Murch
12
Obrigado, isso funciona. É uma pena que o Chrome faça isso, ele deveria simplesmente pular o campo.
472084
Tive esse problema no Chrome para textarea quando o comprimento do texto em textarea era superior a 4100 letras, sem campos obrigatórios ocultos. Quando o comprimento do texto é <4000, tudo funciona, caso contrário, no console, posso ver essa mensagem e não consigo enviar o formulário
ikos23
Se o campo não for obrigatório quando estiver oculto, não faria ainda mais sentido desativá-lo? ( stackoverflow.com/a/22753533/421243 )
David Cook de
3
E se esse erro ainda ocorrer no Chrome, mas o campo não estiver vazio? Você tem alguma ideia de como resolver isso?
Leah
12

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

Robert
fonte
Sim ... você pode dizer a solução para isso?
Rex Rex
@RexRex edito a resposta para ver se isso ajuda você ou me diga o que exatamente você precisa
Robert
@KaziMasumBillah eu não entendo você pode escrever um exemplo em resposta por favor
Robert
9

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.

John Velonis
fonte
1
as pessoas nunca deveriam fazer coisas assim, ele deveria fazer seu código js funcionar com html5 e não apenas desligar o html5 porque ele não pode lidar com isso
Robert
Eu não concordo. Você só precisa de um bom motivo para fazer as coisas de maneira diferente. Ainda existem muitas bibliotecas de validação poderosas por aí. A validação de HTML5 é fácil e rápida de configurar. E acima de tudo, é bom seguir padrões. Mas isso não significa que seja "a melhor" solução. Nunca diga nunca. Sempre depende. Embora eu concorde que você "nunca" deve ignorar a validação do cliente completamente. ;-)
5

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.

sudhAnsu63
fonte
você resolveu meu problema. Mas preste atenção que patternnão parece ser universalmente aceito em type="number"campo
João Pimentel Ferreira
3

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.

Matthew Schinckel
fonte
Possível bug no Chrome. Também aconteceu comigo. +1
gamliela
1

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");
frddy
fonte
1

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.

Dalin Huang
fonte
1

Nenhuma validação fará o trabalho.

<form action="whatever" method="post" novalidate>
Hassi
fonte
0

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

Fstarocka Burns
fonte
0

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

step="0.1"
Роман Зыков
fonte
0

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">
Thomas David Kehoe
fonte
-2
$("...").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
});
Fédi BELKACEM
fonte
-5

substitua requiredpor obrigatório = "obrigatório"

Webodrey
fonte
2
Obrigatório é um atributo HTML5 e "obrigatório" tem o mesmo significado com obrigatório = 'obrigatório' porque não possui outros atributos disponíveis.
filtro de