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

Eu tenho um problema agudo no meu site. No Google Chrome, alguns clientes não podem continuar na minha página de pagamento. Ao tentar enviar um formulário, recebo este erro:

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

Isso é do console do JavaScript.

Eu li que o problema pode ser devido a campos ocultos com o atributo necessário. Agora, o problema é que estamos usando validadores de campo obrigatórios de formulários da web .net, e não o atributo obrigatório html5.

Parece aleatório quem recebe esse erro. Existe alguém que conhece uma solução para isso?

Esse problema ocorre no Chrome se um campo de formulário falhar na validação, mas devido ao fato do respectivo controle inválido não ser focável, a tentativa do navegador de exibir a mensagem "Por favor, preencha este campo" ao lado dele também falha.

Um controle de formulário pode não ser focável no momento em que a validação é acionada por vários motivos. Os dois cenários descritos abaixo são as causas mais importantes:

• O campo é irrelevante de acordo com o contexto atual da lógica de negócios. Nesse cenário, o controle respectivo deve ser removido do DOM ou não deve ser marcado com o requiredatributo nesse ponto.

• A validação prematura pode ocorrer devido a um usuário pressionar a tecla ENTER em uma entrada. Ou um usuário clicando em um botão / controle de entrada no formulário que não definiu o typeatributo do controle corretamente. Se o atributo de tipo de um botão não estiver definido como button, o Chrome (ou qualquer outro navegador) executa uma validação cada vez que o botão é clicado, porque submité o valor padrão do typeatributo de um botão .

  Para resolver o problema, se você tem um botão em sua página que faz outra coisa que não seja enviar ou redefinir , lembre-se sempre de fazer isso: <button type="button">.

Consulte também https://stackoverflow.com/a/7264966/1356062

Adicionar um novalidateatributo ao formulário ajudará:

<form name="myform" novalidate>

No seu form, você pode ter oculto inputtendo requiredatributo:

• <input type="hidden" required />
• <input type="file" required style="display: none;"/>

Para formnão se concentrar nesses elementos, é necessário remover requiredde todas as entradas ocultas ou implementar uma função de validação em javascript para lidar com elas, se você realmente precisar de uma entrada oculta.

Caso alguém mais tenha esse problema, experimentei a mesma coisa. Como discutido nos comentários, isso ocorreu devido ao navegador tentar validar campos ocultos. Ele encontrava campos vazios no formulário e tentava se concentrar neles, mas como eles estavam definidos display:none;, não era possível. Daí o erro.

Consegui resolvê-lo usando algo semelhante a este:

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

Além disso, isso é possivelmente uma duplicata de "Controle de formulário inválido" apenas no Google Chrome

No meu caso, o problema estava em input type="radio" requiredestar oculto com:

visibility: hidden;

Essa mensagem de erro também será exibida se o tipo de entrada necessário radioou checkboxtiver uma display: none;propriedade CSS.

Se você deseja criar entradas personalizadas de rádio / caixa de seleção onde elas devem estar ocultas da interface do usuário e ainda manter o requiredatributo, você deve usar o:

opacity: 0; Propriedade CSS

Nenhuma das respostas anteriores funcionou para mim e não tenho campos ocultos com o requiredatributo

No meu caso, o problema foi causado por ter a <form>e depois a <fieldset>como seu primeiro filho, que contém <input>o requiredatributo with . Removendo o <fieldset>resolvido o problema. Ou você pode embrulhar seu formulário com ele; é permitido pelo HTML5.

Estou no Windows 7 x64, versão Chrome 43.0.2357.130 m.

Outra possibilidade, se você estiver recebendo o erro em uma entrada da caixa de seleção. Se suas caixas de seleção usarem CSS personalizado que oculta o padrão e o substitui por outro estilo, isso também acionará o erro não focalizável no Chrome no erro de validação.

Encontrei isso na minha folha de estilo:

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

A correção simples foi substituí-lo por este:

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

Pode ser que você tenha ocultado (exibir: nenhum) campos com o atributo necessário .

Por favor, verifique se todos os campos obrigatórios estão visíveis para o usuário :)

Para mim, isso acontece, quando há um <select>campo com a opção pré-selecionada com o valor '':

<select name="foo" required="required">
    <option value="" selected="selected">Select something</option>
    <option value="bar">Bar</option>
    <option value="baz">Baz</option>
</select>

Infelizmente, é a única solução de navegador cruzado para um espaço reservado ( como faço para criar um espaço reservado para uma caixa 'selecionar'? ).

O problema surge no Chrome 43.0.2357.124.

Se você possui algum campo com o atributo obrigatório que não é visível durante o envio do formulário, esse erro será gerado. Você acabou de remover o atributo necessário ao tentar ocultar esse campo. Você pode adicionar o atributo necessário, caso deseje mostrar o campo novamente. Dessa forma, sua validação não será comprometida e, ao mesmo tempo, o erro não será gerado.

Para o problema Select2 Jquery

O problema é que a validação do HTML5 não pode focalizar um elemento inválido oculto. Me deparei com esse problema quando estava lidando com o plugin jQuery Select2.

Solução Você pode injetar um ouvinte de evento e um evento 'inválido' de todos os elementos de um formulário para poder manipular um pouco antes do evento de validação do 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);          
});

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>

Sim. Se um controle de formulário oculto exigiu um campo, ele mostra esse erro. Uma solução seria desativar esse controle de formulário . Isso ocorre porque, geralmente, se você está ocultando um controle de formulário, é porque não está preocupado com seu valor. Portanto, esse par de valores de nome de controle de formulário não será enviado ao enviar o formulário.

Você pode tentar .removeAttribute("required")os elementos que estão ocultos no momento do carregamento da janela. pois é bem provável que o elemento em questão esteja marcado como oculto devido a javascript (formulários com guias)

por exemplo

if(document.getElementById('hidden_field_choice_selector_parent_element'.value==true){
    document.getElementById('hidden_field').removeAttribute("required");        
}

Isso deve fazer a tarefa.

Funcionou para mim ... aplausos

Outra causa possível e não abordada em todas as respostas anteriores quando você possui um formulário normal com os campos obrigatórios e o envia, oculta-o diretamente após o envio (com javascript), não dando tempo para a funcionalidade de validação funcionar.

A funcionalidade de validação tentará se concentrar no campo obrigatório e mostrará a mensagem de validação de erro, mas o campo já foi oculto, portanto, "Um controle de formulário inválido com nome = '' não pode ser focalizado". parece!

Editar:

Para lidar com esse caso, basta adicionar a seguinte condição ao manipulador de envio

submitHandler() {
    const form = document.body.querySelector('#formId');

    // Fix issue with html5 validation
    if (form.checkValidity && !form.checkValidity()) {
      return;
    }

    // Submit and hide form safely
  }

Editar: Explicação

Supondo que você oculte o formulário no envio, esse código garante que os campos / formulários não serão ocultados até que o formulário se torne válido. Portanto, se um campo não for válido, o navegador poderá se concentrar nele sem problemas, pois esse campo ainda é exibido.

Há coisas que ainda me surpreendem ... Eu tenho um formulário com comportamento dinâmico para duas entidades diferentes. Uma entidade requer alguns campos que a outra não. Portanto, meu código JS, dependendo da entidade, faz algo como: $ ('# periodo'). RemoveAttr ('required'); $ ("# periodo-container"). hide ();

e quando o usuário seleciona a outra entidade: $ ("# periodo-container"). show (); $ ('# periodo'). prop ('obrigatório', verdadeiro);

Mas, às vezes, quando o formulário é enviado, o problema aparece: "Um controle de formulário inválido com nome = periodo '' não é focalizável (estou usando o mesmo valor para o ID e o nome).

Para corrigir esse problema, você deve garantir que a entrada em que você está configurando ou removendo 'obrigatório' esteja sempre visível.

Então, o que eu fiz é:

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

Isso resolveu meu problema ... inacreditável.

No meu caso..

ng-showestava sendo usado.
ng-iffoi colocado em seu lugar e corrigido meu erro.

Para uso angular:

ng-required = "booleano"

Isso aplicará apenas o atributo html5 'required' se o valor for verdadeiro.

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

Eu vim aqui para responder que eu havia desencadeado esse problema com base em NÃO fechar a </form>tag E ter vários formulários na mesma página. O primeiro formulário será estendido para incluir a validação de busca em entradas de formulário de outros lugares. Como esses formulários estão ocultos, eles acionaram o erro.

por exemplo:

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

Gatilhos

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

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

Um controle de formulário inválido com nome = 'confirmar' não é focalizável.

Existem muitas maneiras de corrigir isso, como

1. Adicione novalidate ao seu formulário, mas ele estará totalmente errado, pois removerá a validação do formulário, o que levará a informações incorretas inseridas pelos usuários.

<form action="...." class="payment-details" method="post" novalidate>

2. Use pode remover o atributo necessário dos campos obrigatórios, o que também está errado, pois removerá a validação do formulário novamente.

   Em vez disso:

<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. Use pode desativar os campos obrigatórios quando você não enviar o formulário em vez de fazer outra opção. Esta é a solução recomendada na minha opinião.

   gostar:

<input class="form-control" id="id_line1" maxlength="255" name="line1" placeholder="First line of address" type="text" disabled="disabled">

ou desabilitá-lo através do código javascript / jquery depende do seu cenário.

Encontrei o mesmo problema ao usar o Angular JS. Isso foi causado pelo uso do necessário juntamente com o ng-hide . Quando cliquei no botão enviar enquanto este elemento estava oculto, ocorreu o erro Um controle de formulário inválido com nome = '' não é focalizável. finalmente!

Por exemplo, usando ng-hide junto com o necessário:

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

Eu o resolvi substituindo o necessário pelo padrão ng.

Por exemplo de solução:

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

Para outros usuários do AngularJS 1.x, esse erro apareceu porque eu estava ocultando a exibição de um controle de formulário, em vez de removê-lo totalmente do DOM, quando não precisava que o controle fosse concluído.

Corrigi isso usando em ng-ifvez de ng-show/ ng-hidena div que contém o controle de formulário que requer validação.

Espero que isso ajude outros usuários de casos extremos.

Deixe-me explicar o meu caso, uma vez que era diferente de todas as soluções acima. Eu tinha uma tag html que não foi fechada corretamente. o elemento não era required, mas foi incorporado em uma hiddendiv

o problema no meu caso era com o type="datetime-local", que por algum motivo estava sendo validado no envio do formulário.

eu mudei isso

<input type="datetime-local" />

nessa

<input type="text" />

Eu queria responder aqui porque NENHUMA dessas respostas ou qualquer outro resultado do Google resolveu o problema para mim.

Para mim, não tinha nada a ver com conjuntos de campos ou entradas ocultas.

Eu descobri que se eu usasse max="5"(por exemplo), isso produziria esse erro. Se eu usasse maxlength="5" ... nenhum erro.

Consegui reproduzir o erro e limpá-lo várias vezes.

Eu ainda não sei por que usar esse código produz o erro, na medida em que este afirma que deveria ser válido, mesmo sem um "min" Eu acredito.

Como alternativa, outra resposta infalível é usar o atributo Placeholder HTML5; não haverá necessidade de usar validações js.

<input id="elemID" name="elemName" placeholder="Some Placeholder Text" type="hidden" required="required">

O Chrome não conseguirá encontrar nenhum elemento vazio, oculto e necessário para focar. Solução Simples.

Espero que ajude. Estou totalmente classificado com esta solução.

Eu vim aqui com o mesmo problema. Para mim (injetar elementos ocultos conforme necessário - ou seja, educação em um aplicativo de emprego) tinha as bandeiras necessárias.

O que eu percebi foi que o validador estava disparando contra o injetado mais rápido do que o documento estava pronto, portanto, ele reclamou.

Minha tag ng requerida original estava usando a tag de visibilidade (vm.flags.hasHighSchool).

Eu resolvi criando um sinalizador dedicado para definir ng-required = "vm.flags.highSchoolRequired == true" necessário

Eu adicionei um retorno de chamada de 10ms ao definir esse sinalizador e o problema foi resolvido.

 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>

Certifique-se de que todos os controles em seu formulário com o atributo necessário também tenham o atributo name definido

Esse erro aconteceu comigo porque eu estava enviando um formulário com os campos obrigatórios que não foram preenchidos.

O erro foi produzido porque o navegador estava tentando se concentrar nos campos obrigatórios para avisar o usuário de que os campos eram obrigatórios, mas esses campos obrigatórios estavam ocultos em uma exibição sem div, para que o navegador não pudesse se concentrar neles. Eu estava enviando a partir de uma guia visível e os campos obrigatórios estavam em uma guia oculta, daí o erro.

Para corrigir, verifique se você controla os campos obrigatórios são preenchidos.

É porque existe uma entrada oculta com o atributo necessário no formulário.

No meu caso, eu tinha uma caixa de seleção e ela está oculta pelo jquery tokenizer usando o estilo embutido. Se eu não selecionar nenhum token, o navegador lançará o erro acima no envio do formulário.

Então, eu o corrigi usando a técnica css abaixo:

  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;

 }

Recebi o mesmo erro ao clonar um elemento HTML para uso em um formulário.

(Eu tenho um formulário parcialmente completo, que possui um modelo injetado e, em seguida, o modelo é modificado)

O erro foi referenciar o campo original e não a versão clonada.

Não consegui encontrar nenhum método que force o formulário a se reavaliar (na esperança de livrar-se de referências aos campos antigos que agora não existem) antes de executar a validação.

Para contornar esse problema, removi o atributo necessário do elemento original e o adicionei dinamicamente ao campo clonado antes de injetá-lo no formulário. O formulário agora valida os campos clonados e modificados corretamente.