Un contrôle de formulaire non valide avec nom = '' n'est pas focalisable

J'ai un problème aigu sur mon site Web. Dans Google Chrome, certains clients ne peuvent pas accéder à ma page de paiement. Lorsque j'essaie de soumettre un formulaire, j'obtiens cette erreur:

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

C'est à partir de la console JavaScript.

J'ai lu que le problème pouvait être dû à des champs cachés ayant l'attribut requis. Maintenant, le problème est que nous utilisons les validateurs de champ requis pour les formulaires Web .net, et non l'attribut requis html5.

Il semble aléatoire qui obtient cette erreur. Y a-t-il quelqu'un qui connaît une solution à cela?

Ce problème se produit sur Chrome si un champ de formulaire échoue à la validation, mais en raison du contrôle invalide respectif n'étant pas focalisable, la tentative du navigateur d'afficher le message "Veuillez remplir ce champ" à côté de lui échoue également.

Un contrôle de formulaire peut ne pas être focalisable au moment où la validation est déclenchée pour plusieurs raisons. Les deux scénarios décrits ci-dessous sont les causes les plus importantes:

• Le champ n'est pas pertinent selon le contexte actuel de la logique métier. Dans un tel scénario, le contrôle respectif doit être supprimé du DOM ou il ne doit pas être marqué avec l' requiredattribut à ce stade.

• Une validation prématurée peut se produire si un utilisateur appuie sur la touche ENTREE sur une entrée. Ou un utilisateur cliquant sur un bouton / contrôle d'entrée dans le formulaire qui n'a pas défini typecorrectement l' attribut du contrôle. Si l'attribut type d'un bouton n'est pas défini sur button, Chrome (ou tout autre navigateur d'ailleurs) effectue une validation à chaque fois que le bouton est cliqué, car il submits'agit de la valeur par défaut de l' typeattribut d'un bouton .

  Pour résoudre le problème, si vous avez un bouton sur votre page qui fait autre chose que soumettre ou remis à zéro , souvenez - vous toujours de le faire: <button type="button">.

Voir également https://stackoverflow.com/a/7264966/1356062

L'ajout d'un novalidateattribut au formulaire aidera:

<form name="myform" novalidate>

Dans votre form, vous pourriez avoir caché inputavoir requiredattribut:

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

Le formne peut pas se concentrer sur ces éléments, vous devez retirer requiredde toutes les entrées cachées, ou mettre en œuvre une fonction de validation en javascript pour les manipuler si vous avez vraiment besoin d' une entrée cachée.

Au cas où quelqu'un d'autre aurait ce problème, j'ai vécu la même chose. Comme indiqué dans les commentaires, cela était dû au fait que le navigateur tentait de valider les champs masqués. Il cherchait des champs vides dans le formulaire et essayait de se concentrer sur eux, mais parce qu'ils étaient définis display:none;, cela ne pouvait pas. D'où l'erreur.

J'ai pu le résoudre en utilisant quelque chose de similaire à ceci:

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

En outre, il s'agit peut-être d'un doublon de "Contrôle de formulaire non valide" uniquement dans Google Chrome

Dans mon cas, le problème était d' input type="radio" requiredêtre caché avec:

visibility: hidden;

Ce message d'erreur indiquera également si le type d'entrée requis radioou checkboxpossède une display: none;propriété CSS.

Si vous souhaitez créer des entrées radio / case à cocher personnalisées où elles doivent être cachées de l'interface utilisateur et conserver toujours l' requiredattribut, vous devez utiliser à la place:

opacity: 0; Propriété CSS

Aucune des réponses précédentes n'a fonctionné pour moi, et je n'ai aucun champ caché avec l' requiredattribut.

Dans mon cas, le problème est dû au fait d'avoir un <form>puis un <fieldset>comme premier enfant, qui contient <input>l' requiredattribut with . La suppression du a <fieldset>résolu le problème. Ou vous pouvez envelopper votre formulaire avec; il est autorisé par HTML5.

Je suis sur Windows 7 x64, Chrome version 43.0.2357.130 m.

Encore une autre possibilité si vous obtenez l'erreur sur une entrée de case à cocher. Si vos cases à cocher utilisent du CSS personnalisé qui masque la valeur par défaut et la remplace par un autre style, cela déclenchera également l'erreur non focalisable dans Chrome en cas d'erreur de validation.

J'ai trouvé cela dans ma feuille de style:

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

La solution simple consistait à le remplacer par ceci:

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

Il se peut que vous ayez masqué (affichage: aucun) les champs avec l' attribut requis .

Veuillez vérifier que tous les champs obligatoires sont visibles par l'utilisateur :)

Pour moi, cela se produit, quand il y a un <select>champ avec une option présélectionnée avec une valeur de '':

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

Malheureusement, c'est la seule solution multi-navigateur pour un espace réservé ( comment puis-je créer un espace réservé pour une zone de sélection? ).

Le problème se pose sur Chrome 43.0.2357.124.

Si vous avez un champ avec l'attribut requis qui n'est pas visible lors de la soumission du formulaire, cette erreur sera levée. Vous venez de supprimer l'attribut requis lorsque vous essayez de masquer ce champ. Vous pouvez ajouter l'attribut requis au cas où vous souhaitez afficher à nouveau le champ. De cette façon, votre validation ne sera pas compromise et en même temps, l'erreur ne sera pas levée.

Pour le problème Select2 Jquery

Le problème est dû à la validation HTML5 ne peut pas concentrer un élément non valide caché. Je suis tombé sur ce problème lorsque je traitais avec le plugin jQuery Select2.

Solution Vous pouvez injecter un écouteur d'événements et un événement «non valide» de chaque élément d'un formulaire afin de pouvoir le manipuler juste avant l'événement de validation 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);          
});

Il affichera ce message si vous avez un code comme celui-ci:

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

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

Oui. Si un contrôle de formulaire masqué contient un champ obligatoire, il affiche cette erreur. Une solution serait de désactiver ce contrôle de formulaire . Cela est dû au fait que si vous masquez un contrôle de formulaire, c'est généralement parce que vous ne vous souciez pas de sa valeur. Cette paire de valeurs de nom de contrôle de formulaire ne sera donc pas envoyée lors de la soumission du formulaire.

Vous pouvez essayer .removeAttribute("required")ces éléments qui sont cachés au moment du chargement de la fenêtre. car il est très probable que l'élément en question soit marqué comme caché en raison de javascript (formulaires à onglets)

par exemple

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

Cela devrait faire l'affaire.

Cela a fonctionné pour moi ... cheers

Une autre cause possible et non couverte dans toutes les réponses précédentes lorsque vous avez un formulaire normal avec des champs obligatoires et que vous soumettez le formulaire, puis le masquez directement après la soumission (avec javascript), ce qui ne laisse pas le temps à la fonctionnalité de validation de fonctionner.

La fonctionnalité de validation essaiera de se concentrer sur le champ requis et affichera le message de validation d'erreur mais le champ a déjà été masqué, donc "Un contrôle de formulaire non valide avec name = '' n'est pas focusable." apparaît!

Éditer:

Pour gérer ce cas, ajoutez simplement la condition suivante dans votre gestionnaire de soumission

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

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

    // Submit and hide form safely
  }

Modifier: explication

En supposant que vous cachez le formulaire lors de la soumission, ce code garantit que le formulaire / les champs ne seront pas masqués tant que le formulaire ne sera pas valide. Ainsi, si un champ n'est pas valide, le navigateur peut se concentrer dessus sans problème car ce champ est toujours affiché.

Il y a des choses qui me surprennent encore ... J'ai une forme avec un comportement dynamique pour deux entités différentes. Une entité nécessite des champs que l'autre n'a pas. Donc, mon code JS, selon l'entité, fait quelque chose comme: $ ('# periodo'). RemoveAttr ('required'); $ ("# periodo-container"). hide ();

et lorsque l'utilisateur sélectionne l'autre entité: $ ("# periodo-container"). show (); $ ('# periodo'). prop ('required', true);

Mais parfois, lorsque le formulaire est soumis, le problème apparaît: "Un contrôle de formulaire non valide avec nom = periodo '' n'est pas focalisable (j'utilise la même valeur pour l'identifiant et le nom).

Pour résoudre ce problème, vous devez vous assurer que l'entrée où vous définissez ou supprimez «requis» est toujours visible.

Donc, ce que j'ai fait, c'est:

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

C'est résolu mon problème ... incroyable.

Dans mon cas..

ng-showétait utilisé.
ng-ifa été mis à sa place et a corrigé mon erreur.

Pour une utilisation angulaire:

ng-required = "booléen"

Cela appliquera uniquement l'attribut html5 «requis» si la valeur est vraie.

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

Je suis venu ici pour répondre que j'avais déclenché ce problème moi-même sur la base de NE PAS fermer le </form> balise ET en ayant plusieurs formulaires sur la même page. Le premier formulaire s'étendra pour inclure la recherche de validation sur les entrées de formulaire provenant d'ailleurs. Parce que ces formulaires sont masqués, ils ont déclenché l'erreur.

donc par exemple:

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

Déclencheurs

Un contrôle de formulaire non valide avec name = 'userId' n'est pas focalisable.

Un contrôle de formulaire non valide avec nom = 'mot de passe' n'est pas focalisable.

Un contrôle de formulaire non valide avec name = 'confirm' n'est pas focalisable.

Il existe de nombreuses façons de résoudre ce problème, comme

1. Ajoutez novalidate à votre formulaire, mais c'est totalement faux car cela supprimera la validation du formulaire, ce qui entraînera des informations erronées saisies par les utilisateurs.

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

2. L'utilisation peut supprimer l'attribut requis des champs obligatoires, ce qui est également erroné car il supprimera à nouveau la validation du formulaire.

   Au lieu de cela:

<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. L'utilisation peut désactiver les champs obligatoires lorsque vous n'allez pas soumettre le formulaire au lieu de faire une autre option. C'est la solution recommandée à mon avis.

   comme:

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

ou le désactiver via le code javascript / jquery dépend de votre scénario.

J'ai trouvé le même problème lors de l'utilisation d'Angular JS. Cela était dû à l'utilisation de required avec ng-hide . Lorsque j'ai cliqué sur le bouton Soumettre alors que cet élément était masqué, il s'est produit l'erreur Un contrôle de formulaire non valide avec nom = '' n'est pas focalisable. enfin!

Par exemple, utiliser ng-hide avec requis:

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

Je l'ai résolu en remplaçant le requis par ng-pattern à la place.

Par exemple de solution:

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

Pour les autres utilisateurs d'AngularJS 1.x, cette erreur est apparue parce que je masquais un contrôle de formulaire à afficher au lieu de le supprimer complètement du DOM alors que je n'avais pas besoin que le contrôle soit terminé.

J'ai corrigé cela en utilisant ng-ifau lieu de ng-show/ ng-hidesur le div contenant le contrôle de formulaire nécessitant une validation.

J'espère que cela vous aidera les autres utilisateurs de cas Edge.

Permettez-moi de présenter mon cas car il était différent de toutes les solutions ci-dessus. J'avais une balise html qui n'était pas fermée correctement. l'élément n'était pas required , mais il était intégré dans un hiddendiv

le problème dans mon cas était avec le type="datetime-local", qui était - pour une raison quelconque - validé lors de la soumission du formulaire.

j'ai changé ça

<input type="datetime-local" />

dans ce

<input type="text" />

Je voulais répondre ici car AUCUNE de ces réponses, ou tout autre résultat Google n'a résolu le problème pour moi.

Pour moi, cela n'avait rien à voir avec des ensembles de champs ou des entrées cachées.

J'ai trouvé que si j'utilisais max="5"(par exemple) cela produirait cette erreur. Si j'ai utilisé maxlength="5" ... pas d'erreur.

J'ai pu reproduire l'erreur et effacer l'erreur plusieurs fois.

Je ne sais toujours pas pourquoi l'utilisation de ce code produit l'erreur, pour autant que cela indique qu'il devrait être valide, même sans "min" je crois.

Alternativement, une autre réponse infaillible consiste à utiliser l'attribut d'espace réservé HTML5, il ne sera donc pas nécessaire d'utiliser de validations js.

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

Chrome ne pourra trouver aucun élément vide, caché et requis sur lequel se concentrer. Solution simple.

J'espère que cela pourra aider. Je suis totalement trié avec cette solution.

Je suis venu ici avec le même problème. Pour moi (injecter des éléments cachés au besoin - c'est-à-dire l'éducation dans une application d'emploi) avait les drapeaux requis.

Ce que j'ai réalisé, c'est que le validateur tirait sur l'injecté plus vite que le document n'était prêt, donc il s'est plaint.

Ma balise ng-required d'origine utilisait la balise de visibilité (vm.flags.hasHighSchool).

J'ai résolu en créant un indicateur dédié pour définir la condition requise ng-required = "vm.flags.highSchoolRequired == true"

J'ai ajouté un rappel de 10 ms sur la définition de cet indicateur et le problème a été résolu.

 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>

Assurez-vous que tous les contrôles de votre formulaire avec l'attribut requis ont également l'attribut name défini

Cette erreur m'est arrivée car je soumettais un formulaire avec des champs obligatoires qui n'étaient pas remplis.

L'erreur a été produite parce que le navigateur essayait de se concentrer sur les champs obligatoires pour avertir l'utilisateur que les champs étaient obligatoires mais ces champs obligatoires étaient masqués dans un affichage aucune div donc le navigateur ne pouvait pas se concentrer sur eux. Je soumettais à partir d'un onglet visible et les champs obligatoires étaient dans un onglet caché, d'où l'erreur.

Pour résoudre ce problème, assurez-vous de contrôler que les champs obligatoires sont remplis.

C'est parce qu'il y a une entrée cachée avec l'attribut requis dans le formulaire.

Dans mon cas, j'avais une boîte de sélection et elle est cachée par le tokenizer jquery utilisant le style en ligne. Si je ne sélectionne aucun jeton, le navigateur renvoie l'erreur ci-dessus lors de la soumission du formulaire.

Donc, je l'ai corrigé en utilisant la technique css ci-dessous:

  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;

 }

J'ai reçu la même erreur lors du clonage d'un élément HTML à utiliser dans un formulaire.

(J'ai un formulaire partiellement complet, qui contient un modèle, puis le modèle est modifié)

L'erreur faisait référence au champ d'origine et non à la version clonée.

Je n'ai trouvé aucune méthode qui forcerait le formulaire à se réévaluer (dans l'espoir qu'il se débarrasse de toute référence aux anciens champs qui n'existent plus) avant d'exécuter la validation.

Afin de contourner ce problème, j'ai supprimé l'attribut requis de l'élément d'origine et l'ai ajouté dynamiquement au champ cloné avant de l'injecter dans le formulaire. Le formulaire valide désormais correctement les champs clonés et modifiés.