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

671

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?

mp1990
fonte
11
Se você acha que isso pode ocorrer devido aos campos obrigatórios ocultos, talvez você deva verificar se, em alguns casos, esses campos permanecem em branco? Por exemplo, se você preencher user_id da sessão ou algo semelhante, em alguns casos, ele poderá permanecer em branco?
Dkasipovic 03/03
1
Acordado. Abra o console do desenvolvedor (F12) no Google Chrome e examine os valores dos campos para ver se os valores desses campos estão em branco.
The Vanilla Thrilla
Obrigado pelo seu comentário. Isso não faz nenhum sentido para mim? Eu tenho um formulário asp.net simples, que usa controles de formulário asp.net. Os controles de entrada são gerados pela estrutura.
mp1990
Eu verifiquei e há valores nos campos de entrada. Eu tenho um campo de entrada oculto que também tem um valor.
mp1990
3
Eu acho que acontece quando o campo é obrigatório, mas não é "visível" em termos gerais. Ele me acontecer de forma dividida em várias guias do campo que disparou o erro está em um guia que não está ativo no momento de enviar Tirei atributo obrigatório de campo e fez validação específica
TexWiller

Respostas:

815

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

Igwe Kalu
fonte
2
Esse problema pode surgir quando uma página é criada e testada com um navegador que não suporta validação do lado do cliente ou não impede o envio do formulário (consulte Safari). O próximo desenvolvedor ou usuário com um navegador que realmente impede o envio de formulários em erros no lado do cliente (consulte o Chrome; mesmo em elementos ocultos do formulário) enfrenta o problema de um formulário inacessível, pois não é possível enviar o formulário e não recebe nenhuma mensagem de o navegador ou site. Evitar completamente a validação via 'novalidate' não é uma resposta correta, pois a validação no lado do cliente deve oferecer suporte às entradas do usuário. Alterar o site é a solução.
graste
4
Obrigado pela resposta detalhada. Omitir requiredou adicionar novalidatenunca é uma boa solução alternativa.
FatCop 31/05/19
2
Essa deve ser a resposta correta. Se você estiver usando a validação do lado do cliente html5, a adição de novalidate corrige um problema ao criar outro. Para ruim, o Chrome deseja validar uma entrada que não é mostrada (e, portanto, não deve ser necessária).
kheit
1
Apenas deixando um exemplo no meu caso, havia um numbercampo oculto onde o valor padrão não era dividível igualmente pelo tamanho da etapa. Alterar o tamanho da etapa resolveu o problema.
James Scott
3
@IgweKalu good call. Encontrei este TinyMCE de implementação em um campo de área de texto. O TinyMCE oculta o campo do formulário original (que era "obrigatório") e aciona esse erro. Solução, remover o atributo agora escondido "necessária" a partir do formulário e contar com outro método para garantir que ele é preenchido.
john
355

Adicionar um novalidateatributo ao formulário ajudará:

<form name="myform" novalidate>
user2909164
fonte
41
Não é um risco de segurança. (Contar com verificações do lado do cliente é.) É um problema de usabilidade.
Jukka K. Korpela 03/03
9
Eu tentei e descobri que "novalidate" não é necessário! Acabei de dar um nome ao meu formulário e tudo funcionou bem!
Ensolarado Sharma
33
Eu tentei e descobri que "novalidate" é realmente necessário. Apenas a adição de um nome de formulário não funciona.
Jeff Tian
13
A adição de novalidate também interrompe a validação do lado do cliente, como na gema Rails Simple Form. Melhor tornar os campos problemáticos desnecessários, de acordo com a resposta de Ankit + o comentário de David Brunow.
steel
9
Eu descobri que "Um controle de formulário inválido com nome = '' não é focalizável." também mostra se as entradas estão em um<fieldset>
oscargilfc
259

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.

Ankit Sharma
fonte
7
Percebi que isso também pode acontecer com campos do tipo "email" configurados para não exibir nenhum, o problema causado pelo Chrome tentando validar o formato.
David Brunow
3
Não precisa ter required. patternsozinho pode causar esse problema.
Pacerier
3
No meu caso, os campos do formulário não eram type = "hidden"; estavam simplesmente fora de vista, por exemplo, em um formulário com guias.
Josh Mc
Eu tenho dois formulários, um com um <input type="hidden" required />e outro com um <input type="text" style="display: none" required />, e o único que está exibindo o erro no Chrome é o display: none, enquanto o "hidden"envio é bom.
Pere
Essa é a resposta correta. O Chrome está tentando validar um campo oculto no CSS. O impede que ele mostre sua mensagem de aviso de validação e alerta sobre esse fato.
superluminary
33

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

Horatio Alderaan
fonte
6
Se você se sentir inclinado a votar nesta resposta, deixe um comentário para me informar o motivo. Prefiro remover a resposta se ela contiver informações ruins do que deixá-las aqui e enganar a comunidade.
Horatio Alderaan
1
Não vou votar, mas sinto que esse código usa uma abordagem de força bruta "mascarando o problema". Certamente tem utilidade ao lidar com código legado, mas para projetos mais recentes eu recomendaria analisar o seu problema um pouco mais. Esta resposta também se aplica ao uso de "novalidate" na tag do formulário, mas isso é um pouco mais visível. +1 para desativado em vez de remover necessário.
Jonathan DeMarks 27/10
1
Para dar um pouco de contexto, eu estava exatamente na situação de "lidar com código legado" quando me deparei com esse problema. Concordo plenamente que é um hack. Muito melhor projetar a marcação para que você não encontre essa situação. No entanto, com bases de código herdadas e sistemas CMS inflexíveis, isso nem sempre é possível. A abordagem acima de desabilitar, em vez de usar "novalidate", foi a melhor maneira que pude pensar para resolver o problema.
Horatio Alderaan 11/11
2
Eu concordo com a abordagem de desativar campos ocultos. A remoção de seus atributos 'necessários' perde as informações, caso sejam mostradas novamente mais tarde. Reativá-los manteria isso, no entanto.
Druckles
1
Adoro esta solução e acho que ela funciona bem quando você tem um formulário com entradas que são exibidas ou ocultadas de forma variável com base nos valores selecionados de outras entradas. Isso preserva as configurações necessárias e ainda permite o envio do formulário. Melhor ainda, se a validação falhar e o usuário fizer algo completamente diferente, não serão necessárias redefinições adicionais.
precisa saber é o seguinte
17

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

Gus
fonte
mesmo problema, com exceção do uso da biblioteca selectivity.js, que oculta a caixa de seleção atual e mostra uma caixa js alternativa com js e css. quando eu uso necessário nele lança este erro form-field.js: 8 create: 1 Um controle de formulário inválido com nome = 'list_id' não é focalizável. cny sugestão como posso trabalhar com isso.
Inzmam ul Hassan
@InzmamGujjar como eu entendi, seu plugin js está criando outra entrada selecionada com suas próprias classes. Talvez alterando as classes CSS do plug-in ou selecionando a entrada criada em name=""vez da entrada original?
Gus
13

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.

Pere
fonte
Teve o mesmo problema, obrigado pela dica. Consertado para resolvê-lo com a sua solução, é estranho.
Ben
Obrigado, este foi o problema no meu caso também.
fantasticrice
no meu caso essa dica ajuda-me
Anja Ishmukhametova
2
Conjuntos de campo também eram meu problema. No meu caso, a resposta foi encontrada aqui: stackoverflow.com/a/30785150/1002047 Parece ser um bug do Chrome (uma vez que o HTML em questão valida usando o validador do W3C). Simplesmente alterar meus conjuntos de campos para divs resolveu o problema.
Eric S. Bullington
@ EricS.Bullington obrigado por apontar. Eu não sabia dessa resposta; como usuário, eu o encontrei "cortando" pedaços do meu formulário. By the way, eu não sei sobre o Chrome versão do sistema de numeração, mas 124-130 em 4 anos não parece ser um grande passo ...
Pere
9

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;
}
Sam
fonte
Essa também foi a solução que eu achei melhor. Ele permite que a mensagem de erro seja exibida perto dos controles invisíveis do formulário.
Rob
8

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

ghuroo
fonte
7

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.

piotr_cz
fonte
7

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.

maniempire
fonte
Dica: $("input").attr("required", "true"); ou pelo $("input").prop('required',true);contrário, você pode removeo atributo / propriedade . >> É necessário adicionar o jQuery aos campos de entrada
fWd82 15/03
7

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);          
});
SudarP
fonte
3

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>
Robert
fonte
eu sei que é o mesmo, eu só fazer um exemplo, algumas pessoas que entendem as coisas melhor com os códigos: D
Robert
3

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.

Kartik Shenoy
fonte
1
Obrigado por esta ideia! Foi útil para mim para alternar elementos de formulário ALL vezes escondidos, independentemente dos individuais são necessárias ou não, então a minha lógica é agradável e simples :)
Gabe Kopley
3

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

utkarshk
fonte
3

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.

Mouneer
fonte
3

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.

Gustavo Soler
fonte
3

No meu caso..

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

Chareesa Graham
fonte
Salvou o meu dia. Obrigado
Syed Atir Mohiuddin 28/11
2

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" />
Nick Taras
fonte
2

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.

Frankenmint
fonte
2

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>

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

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

Umar Asghar
fonte
2

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" >
Khachornchit Songsaen
fonte
1

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.

JD Mallen
fonte
1

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" />
SoliQuiD
fonte
1

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.

Kevin Marmet
fonte
O meu foi resolvido de maneira semelhante, mas a configuração foi min='-9999999999.99' max='9999999999.99'.
Ricardo Green
0

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.

utkarshk
fonte
0

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>
James Fleming
fonte
Sua solução, de fato, é muito, muito arriscada. Qualquer pessoa com CPU lenta ainda receberá o mesmo erro. É (ou será) uma condição típica de corrida. Provavelmente, smartphones antigos podem ser afetados. Portanto, tenha cuidado com esta solução.
Drachenfels
0

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

Adam Diament
fonte
0

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.

eloone
fonte
0

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

 }
sudip
fonte
0

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.

AlastairDewar
fonte